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

一、添加鼠标点击特效:

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

  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/page/javascript-texiao.html

发表评论

登录后才能评论

评论列表(111条)

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

    好玩,很政治正确!

  • 56643945
    56643945 2017-10-06 15:53

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

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

    测试评论特效

  • cyalias
    小Y 2017-10-06 14:47

    酷毙了,太好玩了,嘿嘿,过来赞一下!

  • MonkeyD
    MonkeyD 2017-10-06 12:41

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

  • hipsan
    hipsan 2017-10-06 08:41

    哈哈, 我是来测试效果的,很炫酷 😀

  • 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

    感觉打字好带感!!!!!!!!!!!!!! 💡

  • bkc35
    bkc35 2017-10-03 12:41

    好玩

  • andyzhou
    andyzhou 2017-10-03 12:15

    实验,太棒了!!!

  • DpBLACK
    DpBLACK 2017-10-03 11:37

    这操作真是爆炸 😛

  • 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

    [email protected]

  • 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

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