两款 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快速评论,有人回复邮件通知

评论

12条评论
  1. avatar

    yange Lv.1 Chrome 63.0.3239.26 Chrome 63.0.3239.26 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    还可以666

    山东省滨州市阳信县 电信

    1. avatar

      Ws.诺界流年 Lv.1 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows XP Windows XP 回复

      还可以666

      广东省深圳市 天威视讯

      1. avatar

        伍零博客 Lv.1 uBrowser 6.2.3964.2 uBrowser 6.2.3964.2 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        伍零博客到此一游

        广西南宁市西乡塘区 电信

        1. avatar

          伍零博客 Lv.1 uBrowser 6.2.3964.2 uBrowser 6.2.3964.2 Windows 7 x64 Edition Windows 7 x64 Edition 回复

          伍零博客,日常一游

          广西南宁市西乡塘区 电信

          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 回复

                      不错,支持下

                      广西 电信

                      00:00 / 00:00
                      顺序播放