分享一个鼠标点击红色数字上升的代码

流年
流年
管理员
327
文章
495.7千
浏览
41,824字数 126阅读0分25秒

在狠多网站上都看见过这个特效，觉得挺有趣的，喜欢的可以折腾一下！

 

效果图：分享一个鼠标点击红色数字上升的代码

 

代码：

 

  1. /*
  2. 红色数字上升特效
  3. */
  4. var _click_count=0;
  5. $("body").bind("click",function(e){ //直接给body一个事件好了.
  6. //var n=Math.round(Math.random()*100);//随机数
  7. var $i=$("<b>").text("+"+(++_click_count));//添加到页面的元素
  8. var x=e.pageX,y=e.pageY;//鼠标点击的位置
  9. $i.css({
  10. "z-index":99999,
  11. "top":y-15,
  12. "left":x,
  13. "position":"absolute",
  14. "color":"DeepSkyBlue"
  15. });
  16. $("body").append($i);
  17. $i.animate(
  18. {"top":y-180,"opacity":0},
  19. 1500,
  20. function(){$i.remove();}
  21. );
  22. e.stopPropagation();
  23. });

网站最后更新：2024-1-13
流年
  • 本文由 流年 发表于2016年4月5日 09:02:31
  • 除非特殊声明，本站文章均为原创，需要转载，请留言说明！
博客个性化字体

加载中...

评论  4  访客  4
    • Young小杰
      Young小杰 1
      上海市 4F
      回复

      这个挺好看的

      • 米粒博客
        米粒博客 4
        浙江省温州市 3F
        回复

        之前在别人那看过 还以为是啥呢

        • 历史上的今天
          历史上的今天 1
          北京市朝阳区 2F
          回复

          当娱乐还是挺好的

          • 懿古今
            懿古今 3
            局域网 1F
            回复

            这个确实在一些博客上看到过，不过这种需求一般人还真用不上

          匿名

          发表评论

          匿名网友
          确定

          拖动滑块以完成验证