在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 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>