#WordPress笔记#给网站添加鼠标点击弹出指定汉字特效

  • A+
所属分类:技术教程

网站添加鼠标点击弹出指定汉字特效,就是鼠标点击站点任何位置,都会随机弹出我们指定的一组汉字中的一个。比如指定“文明,自由,民主,公正,和谐”等,点击鼠标时就会随机显示这一组的某个词语,具体点击效果请在本站亲自体验,或见下图。

给网站添加鼠标点击弹出指定汉字特效的操作办法

这个特效不单单适用于 WordPress 博客网站,其他的网站包括但不限于 zblog、HTML 构建的网站都可以实现,只需要将以下 JS 代码添加到页脚的 </body> 标签的前面即可,本站是WordPress,直接将代码添加到主题页脚文件footer.php的</body> 前面即可。

  1. <script type="text/javascript">
  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>

其中 Array("天真","富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善")里面的汉字可以随便修改组合,也可以适当增加或删除,一切随意就好。还有,如果觉得点击弹出的汉字往上跑得太快的话,你可以将以上代码中的 1500 改为 3000 或者更大的数值即可。

本文根据boke112导航《JS特效教程:给网站添加鼠标点击弹出指定汉字特效》一文稍微修改而成~~~

  • 我的QQ
  • 这是我的QQ扫一扫
  • weinxin
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin

发表评论取消回复

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • 感染时空 感染时空 1 广东省茂名市 电信
      UC Browser 6.2.3964.2 UC Browser 6.2.3964.2 Windows 10 x64 Edition Windows 10 x64 Edition

      好,谢谢,一直好奇有些网站的这个特效怎么出来的,还以为是 主题自带的,另外,你的评论框弹出来烟花怎么实现的