给网站添加鼠标点击红色数字或标语上升特效

云墨

647
文章

0
评论

2017年12月23日评论 3,653

点击注册网校，注册后直接登录使用，免费入驻，技术支持微信：https98

把js代码直接加入footer.php中即可，点击鼠标，红色随机数字上升特效代码

本站是直接写入footer.php来实现的。
也可以直接打包成js文件再引入,不会占用太大内存。

给网站添加鼠标点击红色数字或标语上升特效

/**
* 给网站添加鼠标点击红色数字上升特效
* http://wosn.net/301.html
*/
<script>
jQuery(document).ready(function($) {
var _click_count=0;
$("body").bind("click",function(e){ //直接给body一个事件好了.
var n=Math.round(Math.random()*100);//随机数
// var $i=$("<b>").text("+"+(++_click_count));//添加到页面的元素
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>

点击鼠标，红色标语上升特效代码

/**
* 给网站添加鼠标点击红色标语上升特效
* http://wosn.net/301.html
*/
<script type="text/javascript">
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": 9999999999999999999999999999999999999999,
"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>

如果想要给网页背景添加跟随鼠标变幻的动态线条特效canvas-nest请查看这篇文章，里面有详细的教程说明。

1. 如有链接无法下载、失效或广告，请联系QQ：181289218 处理！
2. 本站的所有资源为购买、网络收集，或者用户投稿的资源，版权归原作者及网站所有!
3. 如若侵犯了您的权利，请及时联系站长删除!
4. 本站提供的资源，都不包含技术服务请大家谅解！
5. 此软件“仅限学习交流，不能用于商业用途”！
6. 如用于商业用途，请到官方购买正版软件，追究法律责任与“云墨SEO”站点无关！