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

【摘要】 在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 Js 特效插件。 输入框打字冒光特效 具体的效果请看 GIF 图: ...

  • 内容
  • 相关

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

输入框打字冒光特效


具体的效果请看 GIF 图:

2017-10-10_014607_43.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; ?>  


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

这个特效用起来颇有一股极客的风味~

食用方法:

在页面中引用 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

管理员设置回复可下载

本文标签:

收录状态:百度-[百度未收录] 360-[360未收录] 搜狗-[搜狗未收录]

版权声明:若无特殊注明,本文皆为《玖梦》原创,转载请保留文章出处。

本文链接:两款 Js 插件为你的网站添彩 - http://ini.ee/Other/21.html

二维码加载中……

发表评论

电子邮件地址不会被公开。 必填项已用*标注。采用输入QQ快速评论,有人回复邮件通知

评论

8条评论
  1. avatar

    爱的决择 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

    哦哦哦哦哦哦哦哦哦哦

    浙江省杭州市 电信

    1. avatar

      安朵 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      uyuyuyuyuyu 哦哦哦哦哦哦哦哦哦哦

      广西 移动

      1. avatar

        火火博客 Lv.1 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        拿走了

        河南省许昌市 联通

        1. avatar

          城南千落叶 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 Windows 7 回复

          学习了,谢谢分享

          内蒙古乌兰察布市 联通

          1. avatar

            ROCK_T Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 8.1 x64 Edition Windows 8.1 x64 Edition 回复

            谢谢表妹分享

            浙江省杭州市 电信

            1. avatar

              a陌上花 Lv.1 Firefox 57.0 Firefox 57.0 Windows Windows 回复

              不错,支持下

              广西 电信

              1. avatar

                李明 Lv.1 Chrome 61.0.3163.98 Chrome 61.0.3163.98 Android 6.0.1 Android 6.0.1 回复

                不错的效果

                香港 特别行政区

                1. avatar

                  走不出的回忆 Lv.1 Sogou Explorer Sogou Explorer Windows 7 x64 Edition Windows 7 x64 Edition 回复

                  看看,支持一下博主

                  湖南省长沙市 电信

                  00:00 / 00:00
                  顺序播放