Loper主题添加鼠标点击数字上升特效

Loper主题添加鼠标点击数字上升特效，这个特效代码是我逛博客无意间看到的特效，个人感觉这特效还是不错的所以就转载过来使用，拽立网，我就把这个特效代码弄到loper主题上效果更佳，这特效代码可以修改你喜欢的数字颜色！我个人认为红色数字显示比较经典，今天我把Loper主题添加鼠标点击数字上升特效方法分享给大家，请看以下操作！

添加后的效果图！

1.直接把下面全部代码复制保存为：loper.js

/*-------------------------------------------------*/
/*  鼠标点击红色数字上升效果！
/*-------------------------------------------------*/
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":"DeepSkyBlue"
});
$("body").append($i);
$i.animate(
{"top":y-180,"opacity":0},
1500,
function(){$i.remove();}
);
e.stopPropagation();
});

2.种加鼠标点击数字上升固定效果图！

2.直接把下面全部代码复制保存为：loper.js

/*-------------------------------------------------*/     
/*  鼠标点击红色数字上升效果！
/*-------------------------------------------------*/ 
$("body").bind("click",function(e){ //直接给body一个事件好了.
var $i=$("<b>").text("+666666");//添加到页面的元素
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-200,"opacity":0},2000,function(){$i.remove();});e.stopPropagation();
});

3.登陆你的后台管理，选择【外观】-【编辑】-【loper: 主题页脚 (footer.php)】

直接添加以下全部代码：【</script>后面】

<script  src="<?php bloginfo('template_url');?>/scripts/loper.js"></script>

3.然后把你保存的【loper.js】文件上传到主题文件夹的【/scripts/】目录里！

提示：固定的+666666，可以修改你想要显示的数字！

提示：修改颜色在这里【"color":"red"】目前是红色！

提示：现在可以刷新你的网站博客试试是否有数字上升效果！

提示：我在自己的loper测试可以使用，有些主题不能使用可能就是你的JS代码冲突！

版权声明：本站原创文章，于2016年10月1日，由 拽立网 发表，共 1509 字。

转载注明：Loper主题添加鼠标点击数字上升特效 | 拽立网

赞 0

打赏