点击页面计算点击次数特效

文章目录

在我的博友无主题那里看到的一个特效,就是点击网页,会出现一个计算页面点击次数的特效,感觉挺有意思,跑去看看他的代码写法,然后我发现代码的效率还有改进的地方,于是我就手动修改了一番,一起来看看我的代码是怎么写的。

原来代码

<script>
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":"red"
 });
 $("body").append($i);
 $i.animate(
 {"top":y-180,"opacity":0},
 1500,
 function(){$i.remove();}
 );
 e.stopPropagation();
});
</script>

改进地方

  1. 点击每次不用重新生成元素,其实改变的只有元素里面的数字而已,浪费
  2. 每次都要重新生成一个css,重复了,需要改进
  3. 点击区域应该为document,而不是body
  4. 动画执行过程中如果发生多次点击时,因为需要计数,所以要停止上一个动画的执行

改进代码

此处内容需要登录才可见
点击页面计算点击次数特效

后话

还可以给这个计数增加一个cookie,这个就是后话了。

原文链接:(http://caibaojian.com/clickcount.html)
转发请注明来自前端开发博客
评论已关闭。

“点击页面计算点击次数特效”有6个评论

  1. 花花榆木

    想知道关于html5离线存储的工作原理

    ¥ 打赏 赞(0)
    登录回复
  2. aa

    aaaaaa

    ¥ 打赏 赞(0)
    登录回复
  3. 青盏一座

    勉强看懂代码,写不出来,
    我的路还很长啊。

    ¥ 打赏 赞(0)
    登录回复
  4. xiaowu

    赞一个. .
    提个建议:为什么要弄成登录才能评论??

    ¥ 打赏 赞(2)
    登录回复
    • 前端博客

      很多人拿了代码就走,所以我打算后面不开放网站的资源了,需要登录才能看到了。需要评论才能使用本站资源了。

      登录回复