Loper主题添加鼠标点击数字上升特效,这个特效代码是我逛博客无意间看到的特效,个人感觉这特效还是不错的所以就转载过来使用,拽立网,我就把这个特效代码弄到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.种加鼠标点击数字上升固定效果图!

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

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代码冲突!

» 原创文章:《Loper主题添加鼠标点击数字上升特效》 » 本文地址:《http://www.zlinet.com/10106.html
©版权声明:《拽立网》 » 转载请务必注明出处,喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^