浙江铃声推荐联盟

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

黄良钵博客2019-04-17 14:21:05

把下面代码加在模板文件的头部或者底部,只要在<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>