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

云墨
云墨
云墨
643
文章
11
评论
2017年12月23日 评论 428

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

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

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

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

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

  1. /**  
  2.  * 给网站添加鼠标点击红色标语上升特效 
  3.  * http://wosn.net/301.html  
  4.  */
  5.  <script type="text/javascript">
  6.     var a_idx = 0;
  7.     jQuery(document).ready(function($) {
  8.         $("body").click(function(e) {
  9.             var a = new Array("富强""民主""文明""和谐""自由""平等""公正" ,"法治""爱国""敬业""诚信""友善");
  10.             var $i = $("<span/>").text(a[a_idx]);
  11.             a_idx = (a_idx + 1) % a.length;
  12.             var x = e.pageX,
  13.             y = e.pageY;
  14.             $i.css({
  15.                 "z-index"9999999999999999999999999999999999999999,
  16.                 "top": y - 20,
  17.                 "left": x,
  18.                 "position""absolute",
  19.                 "font-weight""bold",
  20.                 "color""#ff6651"
  21.             });
  22.             $("body").append($i);
  23.             $i.animate({
  24.                 "top": y - 180,
  25.                 "opacity"0
  26.             },
  27.             1500,
  28.             function() {
  29.                 $i.remove();
  30.             });
  31.         });
  32.     });
  33.     </script>

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

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 站长技术资源群
  • QQ群:431710796
  • weinxin
云墨
  • 本文由 发表于 2017年12月23日
  • 转载请务必保留本文链接:https://www.yunmoseo.com/222.html
WordPress回复评论自动添加@评论者的修改方法 网站建设

WordPress回复评论自动添加@评论者的修改方法

有网友留言,问我这个@昵称回复如何实现的?如下图: 其实之前我也看到很多博客有这样的功能,但是我是在后台审核并回复评论的,之前有好几次因为没注意评论信息栏的:回复给***,还以为是给我的留言,所以给人...
匿名

发表评论

匿名网友