php实现点击加号增加数字,WordPress添加鼠标点击红色数字上升特效

在主题footer.php文件body前加入下面代码(需提前引入 jquery 文件，一般主题中已自带)即可实现鼠标点击红色数字上升特效：

var n=Math.round(Math.random()*100);//随机数

var $i=$("").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();

});

如果你没有使用代码压缩，那么上述代码中第一行和最后一行都可以去掉。其中.article-content是你想要实现该效果的模块区域，按需选择即可。

2017 年 11 月 25 日更新：点击红色数字增加

陌小雨在原本基础上升级了，主要是添加了点击次数的累计，改为全局 body 范围内(也可以改为文章内容的主容器)点击都有效，改进后的代码如下，可以记录 cookies(需要你引入 jquery 和 jquery.cookie 文件)也就是说你同时打开陌小雨博客的多个页面，在不同页面点击数字是会一直叠加的。

$("body").bind("click",function(e){

if($.cookie("_click_count") == null){

$.cookie("_click_count",0);

}

var _click_count = $.cookie('_click_count');

++_click_count;

$.cookie("_click_count",_click_count);

var $i = $("").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();

});

两种方式，喜欢哪种就挑哪种吧。

网络版本：

var a_idx = 0;

jQuery(document).ready(function($) {

$("body").click(function(e) {

var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");

var $i = $("").text(a[a_idx]);

a_idx = (a_idx + 1) % a.length;

var x = e.pageX,

y = e.pageY;

$i.css({

"z-index": 99999,

"top": y - 20,

"left": x,

"position": "absolute",

"font-weight": "bold",

"color": "#ff6651"

});

$("body").append($i);

$i.animate({

"top": y - 180,

"opacity": 0

},

1500,

function() {

$i.remove();

});

});

});