1. 程式人生 > >部落格園主頁特效之-滑鼠點選特效

部落格園主頁特效之-滑鼠點選特效

這個滑鼠點選的效果只需要通過下面這段程式碼即可實現:

將如下程式碼放在頁首、頁尾或者公告欄部分都可以!

 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樣式和點選的文字都可以在該程式碼中自行修改成自己想要的。