鼠标点击随机红色数字上升和点击次数叠加上升特效

随机数字上升特效(代码是绑定在class样式上的,使用的时候注意修改。):
footer.php<反斜杠body>前加入下面代码:

<script>  
 $(".article-content").click(function(e){  
   var n=Math.round(Math.random()*100);//随机数  
   var $i=$("<b>").text("+"+n);//添加到页面的元素  
   var x=e.pageX,y=e.pageY;//鼠标点击的位置  
   $i.css({  
     "z-index":99999,  
     "top":y-15,  
     "left":x,  
     "position":"absolute",  
     "color":"red"  
 });  
 $("body").append($i);  
 $i.animate(  
   {"top":y-180,"opacity":0},  
    1500,  
    function(){$i.remove();}  
 );  
 e.stopPropagation();  
});  
</script>  

根据网页的点击次数叠加数字上升特效:

<script>  
var _click_count=0;  
$("body").bind("click",function(e){ //直接给body一个事件好了.   
 //var n=Math.round(Math.random()*100);//随机数  
 var $i=$("<b>").text("+"+(++_click_count));//添加到页面的元素  
 var x=e.pageX,y=e.pageY;//鼠标点击的位置  
 $i.css({  
 "z-index":99999,  
 "top":y-15,  
 "left":x,  
 "position":"absolute",  
 "color":"red"  
 });  
 $("body").append($i);  
 $i.animate(  
 {"top":y-180,"opacity":0},  
 1500,  
 function(){$i.remove();}  
 );  
 e.stopPropagation();  
});  
</script>  

增加cookies记录点击次数

将以上代码 4、5行更换为一下代码。

if (GetCookie("_click_count")==null){  
  SetCookie("_click_count",0);  
}  
_click_count = GetCookie("_click_count");  
SetCookie("_click_count",++_click_count);  
var $i = $("<b>").text("+" + (_click_count));  

注意:
1.使用这个特效要注意,首先要引入jquery,其次把上面的特效代码放到与之间。
2.如果网站使用了压缩页面比如:WordPress前端html代码压缩优化

<!--wp-compress-html--><!--wp-compress-html no compression-->    
把上边的代码添加到这个地方,才能避免被压缩!  
<!--wp-compress-html no compression--><!--wp-compress-html-->    

3.如果是引入js文件,首尾不要写

<script> </script>

4.可能会与其他js文件冲突。
5.可能与模板产生冲突,导致部分功能失效!

参考文章:
红色数字上升特效(改版:点击次数)
http://t.cn/RzeoS8u
WordPress添加鼠标点击红色数字上升特效
http://t.cn/R60SPGC


 继续浏览关于 技术有趣WordPress 的文章

 本文最后更新于 2019/07/21 03:06:26,可能因经年累月而与现状有所差异

 引用转载请注明:icret > 教程 > 鼠标点击随机红色数字上升和点击次数叠加上升特效