部落格園主頁特效之-滑鼠點選特效
阿新 • • 發佈:2019-01-14
這個滑鼠點選的效果只需要通過下面這段程式碼即可實現:
將如下程式碼放在頁首、頁尾或者公告欄部分都可以!
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樣式和點選的文字都可以在該程式碼中自行修改成自己想要的。