鼠标点击网页出现红色数字特效 红色数字上升特效

你是否遇见过有时候点击网页会出现红色的数字，每次点击的数字都不一样，而且红色数字会有慢慢上升的特效，

感觉点击的很爽吧，这里就来分享一下这段特效JS代码，其实想要实现很简单，我们将下面代码加入到foot中的body前即可，额不WordPress可以这么说，加入到foot文件的body前，

其他网页源码直接加到index.html或者想要显示的网页body结构之前即可。

鼠标点击网页出现红色数字特效JS代码：

特效代码一：

<!--wp-compress-html--><!--wp-compress-html no compression-->
<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>
<!--wp-compress-html no compression--><!--wp-compress-html-->

特效代码二：改进版可以记录cookies

<script> 
var _click_count=0; 
$("body").bind("click",function(e){ //直接给body一个事件好了. 
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)); 
 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>

直接添加代码即可实现，如果代码冲突，卸下即可。