通知
关于网站更多信息请加whimurmur模板/jpress插件QQ群(1061691290)            jpress从3.x升级到4.x,显示有些问题,慢慢修复中

whimurmur模板设置点击鼠标出现二进制串

868人浏览 / 0人评论 / | 作者:因情语写  | 分类: whimurmur模板  | 标签: 模板  | 

作者:因情语写

链接:https://www.proprogrammar.com/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>

效果如下


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

点赞(2) 打赏

全部评论

还没有评论!
广告位-帮帮忙点下广告