给博客添加两个有意思的特效

• 网页|代码 • 阅读 19199

一、添加鼠标点击特效：

添加鼠标点击特效，(“富强”, “民主”, “文明”, “和谐”, “自由”, “平等”, “公正” ,”法治”, “爱国”, “敬业”, “诚信”, “友善”)等。

  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>

效果如图：

鼠标点击特效

 

二、添加评论框输入特效：

添加以下代码到主题尾部调用即可

  1. <script src=“activate-power-mode.js”></script>
  2. <script>
  3. POWERMODE.colorful = true; // 控制开启/开启礼花特效  
  4. POWERMODE.shake = false; // 控制开启/关闭屏幕震动特效  
  5. document.body.addEventListener(‘input’, POWERMODE);
  6. </script>

在输入框打字时跟随光标弹出烟花很是炫酷（还可以开启屏幕震动哦！）

true 为开启

false 为关闭

 

效果如图：

输入特效

activate-power-mode.js代码太长就不贴出来了

附activate-power-mode.js文件下载：

[url href=https://eyun.baidu.com/s/3pKW6Exl]提取码：laod[/url]

 

三、主要注意事项：

  1. 鼠标点击特效的代码添加到主题页脚文件或者js里面
  2. 评论框输入特效请自己填写你的activate-power-mode.js文件路径。
  1. <script src=“activate-power-mode.js”></script>

 

原创文章，作者：老D，如若转载，请注明出处：https://laod.cn/4039.html

赞 (2)
0 111
上一篇 2017-09-28 12:46
下一篇 2017-10-17 02:51

相关推荐

发表回复

登录后才能评论

评论列表（111条）

  • 乐小鱼
    乐小鱼 2017-10-06 20:45

    好玩，很政治正确！

  • 56643945
    56643945 2017-10-06 15:53

    测试评论~挖槽，特效真牛逼

  • 三条
    三条 2017-10-06 15:30

    测试评论特效

  • cyalias
    cyalias 2017-10-06 14:47

    酷毙了，太好玩了，嘿嘿，过来赞一下！

  • MonkeyD
    MonkeyD 2017-10-06 12:41

    这个特效看起来不错啊。。。。回复评论都更有动力了。。就是不能支持输入法汉语拼音出来的位置。。。不过也想到高级了

  • hipsan
    hipsan 2017-10-06 08:41

    哈哈， 我是来测试效果的，很炫酷 :grin:

  • lipel
    lipel 2017-10-05 22:29

    试试，哇，效果好棒，哈哈哈

  • 默默
    默默 2017-10-05 20:50

    这个效果挺新奇的，感觉挺不错的。不过我觉得点击出现的文字上面可以加个样式“cursor:default”，这样鼠标的光标就会一致，而不会在点击的时候出现选择文字的光标了 :mrgreen:

  • happy
    happy 2017-10-05 17:42

    laod,1怎么弄？
    是放页面结尾吗？

  • 路人甲
    路人甲 2017-10-05 15:12

    评论特效有点卡顿。

  • Alex
    Alex 2017-10-05 14:59

    这个特效看起来好炫酷啊

  • 老白
    老白 2017-10-05 09:18

    感谢老D，请问JS那个咋弄啊，我不懂JS啊

  • yue
    yue 2017-10-04 18:33

    纯新手不太懂，自己的路径是这样吗

  • huruiyang
    huruiyang 2017-10-04 15:26

    老D，什么是主题页脚文件

  • usyoung
    usyoung 2017-10-04 14:45

    我就为了看下特小果

  • 1147439990
    1147439990 2017-10-04 13:14

    我自己啦看看，哈哈哈，颤抖

  • xibadeyu
    xibadeyu 2017-10-04 12:21

    反映一个bug：在行数过多时，特效会在评论框下方……

  • a16998
    a16998 2017-10-04 09:07

    写成油猴脚本吧！这样挺好玩的！！！！

  • nr3
    nr3 2017-10-04 04:03

    酷毙了，可惜电脑萌新的我还是看不太明白啊

  • silascript
    silascript 2017-10-04 00:42

    最早是atom编辑器的一个插件！

  • zz569655423
    zz569655423 2017-10-03 23:24

    这么酷炫的吗？冲这技术也要留言赞一个

  • Imagination
    Imagination 2017-10-03 22:44

    小白 求问 下载了activate-power-mode.js文件，怎么使用？

  • Howard
    Howard 2017-10-03 22:10

    这种打字的特效，玩几次还可以，天天这样。 眼睛觉得累。。。

  • jim2019
    jim2019 2017-10-03 16:41

    感觉打字好带感！！！！！！！！！！！！！！ :idea:

  • bkc35
    bkc35 2017-10-03 12:41

    好玩

  • andyzhou
    andyzhou 2017-10-03 12:15

    实验，太棒了！！！

  • DpBLACK
    DpBLACK 2017-10-03 11:37

    这操作真是爆炸 :razz:

  • Asp
    Asp 2017-10-03 11:01

    那个特效貌似是不是atom有个包……以前用那个的时候我还没瞎（捂脸）

  • NeveRossa
    NeveRossa 2017-10-03 10:46

    写成油猴脚本吧

  • theia
    theia 2017-10-02 21:55

    酷，刚学完html和css，准备学js，等js学完，我就可以用了。。。

  • mooredam
    mooredam 2017-10-02 20:28

    有趣

  • smeil123
    smeil123 2017-10-02 20:28

    哈哈哈哈哈这两个特效真滴玩上瘾

  • 1999
    1999 2017-10-02 18:31

    就感覺打字敲得特有力度?
    點擊跳字太醉人。。。

  • 好玩
    好玩 2017-10-02 17:50

    好好好好好玩

  • 睡觉塞牙
    睡觉塞牙 2017-10-02 16:04

    打字快了就是一种非常不好的体验了。

  • plb12345
    plb12345 2017-10-02 16:03

    哇，好酷

  • LaJi_Jiemo
    LaJi_Jiemo 2017-10-02 14:31

    太好玩了。 但是某狗输入法只能按字出来后才有特效

  • live
    live 2017-10-02 11:49

    怎好玩！哈哈哈！

  • 少年时vklw
    少年时vklw 2017-10-02 11:14

    我来试试特效哈哈哈哈哈哈哈哈哈

  • Ewing
    Ewing 2017-10-02 08:46

    真好玩哈哈，测试上瘾了

  • macau168
    macau168 2017-10-01 23:09

    显示屏打字太快跳得有点可怕。

    • 老D
      老D 2017-10-01 23:34

      @macau168：先过把瘾，过段时间再把屏幕震动关了

    • efxz
      efxz 2017-10-02 19:28

      @老D：老D，能弄个设置让我们自己选择吗，我感觉这两种特效都挺棒的O(∩_∩)O~~

  • 904
    904 2017-10-01 22:59

    我来试试，确实很苦

  • 张甲博客
    张甲博客 2017-10-01 22:07

    不知道为什么上传到根目录还是上传到文件夹，都没有起作用

    • 老D
      老D 2017-10-01 23:36

      @张甲博客：评论框输入特效请自己填写你的activate-power-mode.js文件路径。

  • 纯洁的童鞋
    纯洁的童鞋 2017-10-01 20:17

    玩上瘾了怎么办？在线等

  • Duang
    Duang 2017-10-01 19:55

    评论时整个网页都在颤动……

  • null
    null 2017-10-01 18:48

    很讨厌那24个叶公好龙的政@治口.号

  • leoxxx
    leoxxx 2017-10-01 18:08

    Interesting :mrgreen:
    但是我这里打字没效果。

  • kk2333
    kk2333 2017-10-01 17:53

    牛逼，666！

  • 星空之颠
    星空之颠 2017-10-01 17:39

    emmmm…..依然是8小时前

  • foutlook
    foutlook 2017-10-01 17:08

    屌爆了。。。。。。。。。。。。。。。