作者：whisper

链接：http://proprogrammar.com:443/article/781

声明：请尊重原作者的劳动，如需转载请注明出处

点击鼠标特效效果比较有趣，见过点击出现文字的，或者通过canvas出现动画，我这里类似文字，不过是换成了随机01字符串，有些程序员的特点吧，下面说说是如何实现的

进入设置-代码设置

在body结束js代码中增加如下代码

<script>
//鼠标点击特效
    //给页面创建点击事件
    $("body").click(function (e) {

        var winW = $(document).width();
        //创建元素; 创建的元素是span元素,这个元素的内容是随机二进制数
        var bin = $("<span style='display:none;font-weight: bold'>").text(Math.floor((Math.random() * 256)).toString(2));
        //在页面上添加span元素
        $("#bin").append(bin);
        
        //获取鼠标点击坐标
        var px = e.pageX;
        var py = e.pageY;

        //给span元素添加css样式
        bin.css({
            "z-index": 999, //设置或获取定位对象的堆叠次序(z-index):999
            "top": py - 20, //上(top):y-20
            "left": px, //左:x
            "position": "absolute", //定位:绝对定位
            "color": '#' + Math.floor( Math.random() * 0xffffff ).toString(16), //随机颜色
            "user-select": "none", //使文字不被选中
            "width": bin.width() + px + 3 > winW ? winW - px - 3 : bin.width(),//下面三个防止内容撑开文档宽度
            "display" : "block",
            "overflow": "hidden"
        });

        //
        bin.animate({
                "top": py - 180, //上:y-180 
                "opacity": 0 //透明度(opacity):0 
            }, 2000, //1500,调节动画速度 
            function () { //回调函数 
                bin.remove(); //删除
            }
        );

    });
</script>

效果如下

亲爱的读者：有时间可以点赞评论一下