博客园主页特效之-鼠标点击特效
程序员文章站
2022-06-21 22:02:22
这个鼠标点击的效果只需要通过下面这段代码即可实现: 将如下代码放在页首、页脚或者公告栏部分都可以! PS:css样式和点击的文字都可以在该代码中自行修改成自己想要的。 ......
这个鼠标点击的效果只需要通过下面这段代码即可实现:
将如下代码放在页首、页脚或者公告栏部分都可以!
1 <script type="text/javascript"> 2 /* 鼠标特效 */ 3 var a_idx = 0; 4 jquery(document).ready(function($) { 5 $("body").click(function(e) { 6 var a = new array("❤java❤","❤c++❤","❤php❤","❤mysql❤","❤oracle❤","❤.net❤","❤javascript❤","❤h5❤","❤python❤","❤json❤","❤ruby❤","❤go❤"); 7 var $i = $("<span></span>").text(a[a_idx]); 8 a_idx = (a_idx + 1) % a.length; 9 var x = e.pagex, 10 y = e.pagey; 11 $i.css({ 12 "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 13 "top": y - 20, 14 "left": x, 15 "position": "absolute", 16 "font-weight": "bold", 17 "color": "rgb("+~~(255*math.random())+","+~~(255*math.random())+","+~~(255*math.random())+")" 18 }); 19 $("body").append($i); 20 $i.animate({ 21 "top": y - 180, 22 "opacity": 0 23 }, 24 1500, 25 function() { 26 $i.remove(); 27 }); 28 }); 29 }); 30 </script>
ps:css样式和点击的文字都可以在该代码中自行修改成自己想要的。
上一篇: 如何用Nginx解决前端跨域问题?
下一篇: Maria-DB