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

评论

13条评论
  1. avatar

    南街 Lv.1 Chrome 57.0.2987.98 Chrome 57.0.2987.98 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    南街博客路过,祝福玖梦博客越办越好

    江苏省盐城市建湖县 电信

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

                      谢谢分享

                      浙江省杭州市 电信

                      00:00 / 00:00
                      顺序播放