WordPress添加鼠标点击页面显示文字JS特效

原创 黄良钵  2017-12-28 23:22  阅读 387 次 评论 2 条

把下面代码加在模板文件的头部或者底部,只要在<body></body>之间就好,也可以单独页面使用,也可以其他程序使用。需要引入jQuery,一般大部分主题、网站都会引用jQuery。

  1. <script>
  2. /* 鼠标特效 */
  3. var a_idx = 0;
  4. jQuery(document).ready(function($) {
  5.     $("body").click(function(e) {
  6.         var a = new Array("富强""民主""文明""和谐""自由""平等""公正" ,"法治""爱国""敬业""诚信""友善");
  7.         var $i = $("<span/>").text(a[a_idx]);
  8.         a_idx = (a_idx + 1) % a.length;
  9.         var x = e.pageX,
  10.         y = e.pageY;
  11.         $i.css({
  12.             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
  13.             "top": y - 20,
  14.             "left": x,
  15.             "position""absolute",
  16.             "font-weight""bold",
  17.             "color""#ff6651"
  18.         });
  19.         $("body").append($i);
  20.         $i.animate({
  21.             "top": y - 180,
  22.             "opacity": 0
  23.         },
  24.         1500,
  25.         function() {
  26.             $i.remove();
  27.         });
  28.     });
  29. });
  30. </script>
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

  1. 崔哲
    崔哲 【VIP 2】来自天朝的朋友 谷歌浏览器 Ubuntu Linux 中国 · 山东 · 青岛 · 移动 @回复

    我说怎么打不开你网站了,原来弃用“博客”二级域名了啊~

    • 黄良钵
      黄良钵【站长】2018-01-20 at 19:54来自天朝的朋友 谷歌浏览器  Android 7.0 BLN-AL10 Build/HONORBLN-AL10 中国 · 海南 · 海口 · 电信  回复

      @崔哲早就换成顶级域名了,不过博客那个二级好像设置了跳转,打不开可能不小心把解析给删了