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

原创 2017-10-10 11:02  阅读 1,026 次 评论 16 条

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

输入框打字冒光特效

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

食用方法:

普通网站:

在网站中引入 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>   

下载地址

参考资料

[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

版权声明: 本文为孟坤博客原创文章,欢迎转载。转载请务必注明出处! (参考格式:本文转自孟坤博客,原文地址:https://mkblog.cn/1094/

文件下载

如遇下载链接失效,请在下方留言,我将在第一时间补上链接。

发表评论


表情

  1. 茗血
    茗血 Lv 1 回复 #7 2017-11-14 23:16

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

  2. 绅士
    绅士 Lv 1 回复 #6 2017-10-19 14:21

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

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

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

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

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

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

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

  3. Saiki
    Saiki Lv 1 回复 #5 2017-10-17 16:47

    大佬…py一波友链嘛??

    • mengkun
      mengkun 站长 回复 2017-10-17 20:40

      @Saiki友链可以,拒绝 PY [doge]

  4. 瀚宇软件
    瀚宇软件 Lv 2 回复 #4 2017-10-14 19:50

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

  5. 老司机
    老司机 Lv 3 回复 地板 2017-10-12 00:03

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

    • mengkun
      mengkun 站长 回复 2017-10-12 08:37

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

  6. 苹果卡
    苹果卡 Lv 1 回复 板凳 2017-10-11 19:50

    我想要评论区楼层样式

    • mengkun
      mengkun 站长 回复 2017-10-12 08:37

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

  7. 小卡就是卡卡
    小卡就是卡卡 Lv 1 回复 沙发 2017-10-10 13:49

    那个,我亲测不行