博客园美化样式一条龙服务

博客园作为自己总结知识、见证自己技术成长的技术家园,就像自己的房间一样,想收拾的干净,舒服,与众不同

因为网上内容比较零散杂乱,装饰博客的时候也花了挺多时间去搜索,测试,针对自己博客布局进行了css样式的调整和js微调

本来只是想自己使用,有网友需要,就开放出来,来源于网络回归于网络,代码已经增加注释并且明确代码安放位置,希望可以帮到大家,节省各位的时间

以下代码均亲测有效且大多正在使用,效果参考我的博客

所有前端源码均来自网络,作者不详,感谢网络各位前端大神的奉献

1.页面点击小爱心

爱心形状颜色,文字内容可以根据自己需求修改

博客园装饰样式  博客园美化样式
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤欢迎骚扰❤","❤点一下试试❤","❤你贼帅❤","❤么么哒❤","❤啊啊啊❤","❤爱死你啦❤","❤别点啦❤","❤别再点啦❤","❤再点一下试试❤","❤点你咋滴❤","❤爱死你啦❤","❤溜了溜了❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
View Code

相关文章: