给网站添加鼠标点击红色数字或标语上升特效

沃森博客
沃森博客
沃森博客
1421
文章
9
评论
2017年9月5日17:11:03JS/jQuery评论733阅读模式

给网站添加鼠标点击红色数字或标语上升特效
把js代码直接加入footer.php中即可。

点击鼠标，红色随机数字上升特效代码

  1. /**  
  2.  * 给网站添加鼠标点击红色数字上升特效 
  3.  * http://wosn.net/301.html  
  4.  */    
  5. <script>  
  6.     jQuery(document).ready(function($) {  
  7.     var _click_count=0;  
  8.     $("body").bind("click",function(e){ //直接给body一个事件好了.  
  9.     var n=Math.round(Math.random()*100);//随机数  
  10.    // var $i=$("<b>").text("+"+(++_click_count));//添加到页面的元素  
  11.      var $i=$("<b>").text("+"+(++n));//添加到页面的元素  
  12.     var x=e.pageX,y=e.pageY;//鼠标点击的位置  
  13.     $i.css({  
  14.     "z-index":99999,  
  15.     "top":y-15,  
  16.     "left":x,  
  17.     "position":"absolute",  
  18.     "color":"red"  
  19.     });  
  20.     $("body").append($i);  
  21.     $i.animate(  
  22.     {"top":y-180,"opacity":0},  
  23.     1500,  
  24.     function(){$i.remove();}  
  25.     );  
  26.     e.stopPropagation();  
  27.     });  
  28.     });  
  29.     </script>  

点击鼠标，红色标语上升特效代码

  1. /**  
  2.  * 给网站添加鼠标点击红色标语上升特效 
  3.  * http://wosn.net/301.html  
  4.  */    
  5.  <script type="text/javascript">  
  6.     var a_idx = 0;  
  7.     jQuery(document).ready(function($) {  
  8.         $("body").click(function(e) {  
  9.             var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");  
  10.             var $i = $("<span/>").text(a[a_idx]);  
  11.             a_idx = (a_idx + 1) % a.length;  
  12.             var x = e.pageX,  
  13.             y = e.pageY;  
  14.             $i.css({  
  15.                 "z-index": 9999999999999999999999999999999999999999,  
  16.                 "top": y - 20,  
  17.                 "left": x,  
  18.                 "position": "absolute",  
  19.                 "font-weight": "bold",  
  20.                 "color": "#ff6651"  
  21.             });  
  22.             $("body").append($i);  
  23.             $i.animate({  
  24.                 "top": y - 180,  
  25.                 "opacity": 0  
  26.             },  
  27.             1500,  
  28.             function() {  
  29.                 $i.remove();  
  30.             });  
  31.         });  
  32.     });  
  33.     </script>  

沃森博客
  • 本文由 发表于 2017年9月5日17:11:03
  • 本文来自互利网收集整理，问题反馈联系邮箱：wosnnet@foxmail.com，转载请务必保留本文链接：https://wosn.net/301.html

发表评论