作者:因情语写
链接: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>
效果如下
亲爱的读者:有时间可以点赞评论一下
月份 | 原创文章数 |
---|---|
202206 | 4 |
202205 | 2 |
202204 | 1 |
202203 | 11 |
202201 | 2 |
202108 | 7 |
202107 | 3 |
202106 | 16 |
202105 | 10 |
202104 | 16 |
202103 | 56 |
202102 | 14 |
202010 | 3 |
202009 | 3 |
202008 | 7 |
202007 | 7 |
202006 | 10 |
202005 | 11 |
202004 | 22 |
202003 | 52 |
202002 | 44 |
202001 | 83 |
201912 | 52 |
201911 | 29 |
201910 | 41 |
201909 | 99 |
201908 | 35 |
201907 | 73 |
201906 | 121 |
201811 | 1 |
201810 | 2 |
201804 | 1 |
201803 | 1 |
201802 | 1 |
201707 | 1 |
全部评论