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

评论

10条评论
  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 回复

                  不错,支持下

                  广西 电信

                  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
                      顺序播放