在主題footer.php文件body前加入下面代碼(需提前引入 jquery 文件，一般主題中已自帶)即可實現鼠標點擊紅色數字上升特效：

<!--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-->

如果你沒有使用代碼壓縮，那么上述代碼中第一行和最后一行都可以去掉。其中.article-content是你想要實現該效果的模塊區域，按需選擇即可。

2017 年 11 月 25 日更新：點擊紅色數字增加

陌小雨在原本基礎上升級了，主要是添加了點擊次數的累計，改為全局 body 范圍內（也可以改為文章內容的主容器）點擊都有效，改進后的代碼如下，可以記錄 cookies（需要你引入 jquery 和 jquery.cookie 文件）也就是說你同時打開陌小雨博客的多個頁面，在不同頁面點擊數字是會一直疊加的。

<script>
$("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 = $("<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>

兩種方式，喜歡哪種就挑哪種吧。

網絡版本：

<script>
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善");
var $i = $("<span/>").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();
});
});
});
</script>

文章來源：陌小雨博客 原文地址：https://dedewp.com/579.html

總結

以上是生活随笔為你收集整理的WordPress添加鼠标点击红色数字上升特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。