两款 Js 插件为你的网站添彩

mengkun 13.2K 29

在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 Js 特效插件。

输入框打字冒光特效

这款特效本博客也在使用，也有很多人问过是怎么实现的。具体的效果请看 GIF 图：

两款 Js 插件为你的网站添彩

食用方法：

普通网站：

在网站中引入 activate-power-mode.js (下载地址在文末)

  1. <script src="activate-power-mode.js "></script>  

然后再插入一段 JS 进行配置：

  1. <script>  
  2. POWERMODE.colorful = true;  // 冒光特效  
  3. POWERMODE.shake = false;    // 抖动特效  
  4. document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效  
  5. </script>  

如果是 WordPress 网站，那么先上传 activate-power-mode.js 到 当前主题目录/js 文件夹中，然后打开主题的 footer.php，并在里面插入如下代码即可：

  1. <script src="<?php bloginfo('template_directory'); ?>/js/activate-power-mode.js "></script>  
  2. <script>  
  3. POWERMODE.colorful = true;  // 冒光特效  
  4. POWERMODE.shake = false;    // 抖动特效  
  5. document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效  
  6. </script>  

这个特效在移动端可能会导致有点卡，体验不是很好。如果想要仅仅在 PC 端使用，那么可以这样：

  1. <?php if (!wp_is_mobile()): ?>  
  2. <script src="<?php bloginfo('template_directory'); ?>/js/activate-power-mode.js "></script>  
  3. <script>  
  4. POWERMODE.colorful = true;  // 冒光特效  
  5. POWERMODE.shake = false;    // 抖动特效  
  6. document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效  
  7. </script>  
  8. <?php endif; ?>  

鼠标滑过随机文字变换特效

这个特效用起来颇有一股极客的风味~为什么这么说呢？请看下面这个 Demo:

  • 代码审计
  • 社工渗透
  • 提权测试
  • 端口扫描

食用方法：

在页面中引用 jquery 和 chaffle.min.js

  1. <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>  
  2. <script src="./js/chaffle.min.js"></script>  

启用插件对应的 class

  1. <script>  
  2.   $(document).ready(function() {  
  3.     $('.chaffle').chaffle();  
  4.   });   
  5. </script>  

html

  1. <a href="#" class="chaffle" data-lang="en">nav01</a>    
  2. <a href="#" class="chaffle" data-lang="en">nav02</a>    
  3. <a href="#" class="chaffle" data-lang="en">nav03</a>    
  4. <a href="#" class="chaffle" data-lang="en">nav04</a>    
  5. <a href="#" class="chaffle" data-lang="zh">中文（汉字）</a>    
  6. <a href="#" class="chaffle" data-lang="zh">孟坤博客</a>    
  7. <a href="#" class="chaffle" data-lang="ja-katakana">カタカナ</a>   

下载地址

百度网盘 蓝奏云 永硕E盘

参考资料

[1].如何给WordPress博客网站添加评论输入特效.boke112导航 http://boke112.com/3681.html

[2].Chaffle:Shuffle Randomly Character.blivesta https://github.com/blivesta/chaffle

[3].jquery随机字符插件Chaffle http://www.jq22.com/jquery-info549

本文作者为mengkun，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. 小灿同学
    小灿同学 Lv 1

    感谢老大

    #15 2023-02-25 13:49 回复
  2. KrisTHL181
    KrisTHL181 Lv 1

    问一下，你这个要用jQuery马？
    导入了用不了阿。
    (localhost实验阶段)

    #14 2022-04-12 19:10 回复
  3. 67141988
    67141988 Lv 1

    [aru_2]不错不错

    #13 2019-10-07 09:36 回复
  4. ikq
    ikq Lv 1

    插件真好用，感谢大佬的无私分享

    #12 2019-06-13 11:49 回复
  5. 雪兔博客
    雪兔博客 Lv 1

    踩一踩

    #11 2019-05-11 18:25 回复
  6. Gui
    Gui Lv 1

    我是一个小白白。。来问一下你那个音乐的api是哪里的？现在的api都要钱你是怎么弄的呢？[aru_3]

    #10 2018-01-11 10:21 回复
    • mengkun
      mengkun 站长

      @Guihttps://github.com/metowolf/Meting

      2018-01-11 15:57 回复
      • Gui
        Gui Lv 1

        @mengkun感谢您的帮助，对我很有用，谢谢[aru_1]

        2018-01-11 16:56 回复
      • Empty丶弧光
        Empty丶弧光 Lv 1

        @mengkun链接已嗝屁....2333

        2018-07-10 10:48 回复
    • 老司机
      老司机 Lv 5

      @Gui都看的懂github，还说自己是小白，不老实[aru_47]

      2018-02-04 18:08 回复
  7. 彼岸临窗
    彼岸临窗 Lv 1

    修改好了。。。嘻嘻，js里面有那个定位

    #9 2017-12-03 16:21 回复
  8. 彼岸临窗
    彼岸临窗 Lv 1

    有个问题，如果是在弹出框里输入，而弹出框的层级比这个高，特效就会被覆盖，能不能把这个特效层至于顶层呢，请教如何修改

    #8 2017-12-03 15:55 回复
  9. 茗血
    茗血 Lv 5

    [大哭] 大佬，你这个表情怎么改的啊，有没有教程的啊

    #7 2017-11-14 23:16 回复
  10. 绅士
    绅士 Lv 1

    老哥介意分享一下你那个贴吧ID查询的源码吗 [坏笑] [坏笑]

    #6 2017-10-19 14:21 回复
    • mengkun
      mengkun 站长

      @绅士抱歉，那个源码不是我的，无法分享

      2017-10-19 14:22 回复
      • 绅士
        绅士 Lv 1

        @mengkun可以给个作者的链接吗 我去买

        2017-10-19 14:34 回复
      • mengkun
        mengkun 站长

        @绅士百度贴吧 @从容无比

        2017-10-19 14:37 回复
  11. Saiki
    Saiki Lv 1

    大佬…py一波友链嘛？？

    #5 2017-10-17 16:47 回复
    • mengkun
      mengkun 站长

      @Saiki友链可以，拒绝 PY [wb_doge]

      2017-10-17 20:40 回复
  12. 瀚宇软件
    瀚宇软件 Lv 3

    有一种很炫酷很好看的感觉

    #4 2017-10-14 19:50 回复
  13. 老司机
    老司机 Lv 5

    为了速度，我这次要少用这些玩意儿了

    地板 2017-10-12 00:03 回复
    • mengkun
      mengkun 站长

      @老司机换了个昵称搞得我还以为是个广告号 [wb_二哈]
      前台的 JS 插件对速度其实没多大的影响。如果网站开启了 CDN，更是可以忽略不计。

      2017-10-12 08:37 回复
      • 广元巴士
        广元巴士 Lv 5

        @mengkun我这次来是来检验头像的 [wb_二哈]

        2017-10-12 19:46 回复
      • mengkun
        mengkun 站长

        @广元巴士恭喜加入有头像一族 [鼓掌]

        2017-10-12 19:48 回复
    • KrisTHL181
      KrisTHL181 Lv 1

      @老司机建议放在本地，不要用域外JavaScript，真的慢~~
      我:jquery;sweetalert;chaffle;放域内，3秒左右
      试了一下放域外，8秒左右

      2022-04-13 08:28 回复
  14. 苹果卡
    苹果卡 Lv 1

    我想要评论区楼层样式

    板凳 2017-10-11 19:50 回复
    • mengkun
      mengkun 站长

      @苹果卡评论部分改动较多，这个不是一句两句能说清的……

      2017-10-12 08:37 回复
  15. 小卡就是卡卡
    小卡就是卡卡 Lv 2

    那个,我亲测不行

    沙发 2017-10-10 13:49 回复
分享