JS特效教程:给网站添加鼠标点击弹出指定汉字特效

投稿   天真网  2017-07-04 07:24:23  421 人阅读  31 条评论

投放广告联系   诚邀合作伙伴   赞助我们   本站公告   轻松一刻

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

JS特效教程:给网站添加鼠标点击弹出指定汉字特效 建站经验 第1张

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

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

  1. <script type="text/javascript">
  2. /*天真网(tzw520.cn) 鼠标特效 */
  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 或者更大的数值即可。

拓展阅读

历史上的今天:

文章标签: ,   ,  
原文地址:http://tzw520.cn/weiboketianjiadianjitexiao/
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 天真网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress虚拟主机和VPS服务器推荐

 发表评论


  1. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    这个可以有

  2. 任务易
    任务易 【小白】 @回复

    下次可以试试动态点击效果,应该比这个更好玩

  3. BanYuner
    BanYuner 【进士】 @回复

    这个我看到很多站点都在使用,但是说实话,我个人觉得没有说明卵用

    • boke112导航
      boke112导航【村长】2017-07-06 09:01  回复

      @BanYuner这个就看个人喜好了,就好比有些博主喜欢自动播放音乐一样

  4. 木庄博客
    木庄博客 【书童】 @回复

    已收藏,不过兼容性也要考虑一下

  5. 搜罗网
    搜罗网 【小白】 @回复

    666啊,见识了

  6. 冷知识
    冷知识 【进士】 @回复

    你这例子不错,核心价值观,我刚考完

  7. 码农BTS
    码农BTS 【状元】 @回复

    奇怪,我加上这段js之后好像没有效果

    • boke112导航
      boke112导航【村长】2017-07-05 17:09  回复

      @码农BTS[疑问] 应该不会吧,我用HTML网页测试都有效

  8. 写给工厂上班的人
    写给工厂上班的人 【举人】 @回复

    感觉非主流使用,不知道,现在还有非主流这个概念吗?

  9. 脚丫网赚
    脚丫网赚 【进士】 @回复

    挺好玩的

  10. 小宋日志
    小宋日志 【尚书】 @回复

    挺好玩的功能。

  11. YangOne
    YangOne 【进士】 @回复

    本站不是很需要这个东西,但是还是支持一下

  12. 小萝博客
    小萝博客 【状元】 @回复

    个人博客加个不错

  13. 夏天烤洋芋
    夏天烤洋芋 【进士】 @回复

    有点酷炫的样子。

  14. 码农BTS
    码农BTS 【状元】 @回复

    看起来不错,考虑加上

  15. 寒辞
    寒辞 【书童】 @回复

    不错的效果,学习了 [赞]

  16. 励志语录
    励志语录 【进士】 @回复

    不错,又学习了新知识

  17. 雅兮网
    雅兮网 【尚书】 @回复

    z-index:写那么长 是不是有点太扯了………….

  18. 管家婆
    管家婆 【进士】 @回复

    大爱JS 已无法自拔

  19. 心动
    心动 【举人】 @回复

    我给我自己网站加的弹数字的+1+1+1的弹~你这个也很有意思~哈哈哈~

  20. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    哎呀,好玩,还有这种效果啊。。

  21. 电脑维修
    电脑维修 【状元】 @回复

    鼠标点击弹出指定汉字特效我试了一下, 网站好慢

  22. 爱时尚
    爱时尚 【尚书】 @回复

    zblog也可以是吗。要试试了

    • 雅兮网
      雅兮网 【尚书】2017-07-04 11:26  回复

      @爱时尚这跟程序没关系,网页都可以

  23. 小苍老师
    小苍老师 【状元】 @回复

    这有意思,晚上给自己的博客搞上!这段代码是加到模版的首页里,还有模版的页尾PHP里哈!

    • 心动
      心动 【举人】2017-07-04 10:41  回复

      @小苍老师其实加载头文件或者脚文件其中之一就行