博客园鼠标点击特效代码
统一回复一下,有些网友直接复制粘贴后没有实现鼠标点击的效果,可能是没有向博客园申请js的权限,申请下来后就可以自定义自己的博客了。
<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>
2019/11/2更新,已经换了新的鼠标特效了。
看到有园友在下面留言,询问我当前的鼠标特效是如何实现的,这里统一回复一下。
更换鼠标标志
在css样式body里加 cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto;里面图片改成自己的就行了
background-image: url("https://img2018.cnblogs.com/blog/1358881/201909/1358881-20190910100015098-837598352.jpg");
background-repeat: repeat;
background-attachment: fixed;
background-size:cover;
cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto;
}
鼠标烟花效果:
<script src="https://files.cnblogs.com/files/wkfvawl/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>