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

  • 内容
  • 相关

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

输入框打字冒光特效

这款特效本博客也在使用,也有很多人问过是怎么实现的。具体的效果请看 GIF 图:

1.gif 

食用方法:

普通网站:

在网站中引入 activate-power-mode.js (下载地址在文末)


<script src="activate-power-mode.js "></script> 


然后再插入一段 JS 进行配置:


<script>  
POWERMODE.colorful = true;  // 冒光特效  
POWERMODE.shake = false;    // 抖动特效  
document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效  
</script>


如果是 WordPress 网站,那么先上传 activate-power-mode.js 到 当前主题目录/js 文件夹中,然后打开主题的 footer.php,并在里面插入如下代码即可:


<script src="<?php bloginfo('template_directory'); ?>/js/activate-power-mode.js "></script>  
<script>  
POWERMODE.colorful = true;  // 冒光特效  
POWERMODE.shake = false;    // 抖动特效  
document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效  
</script>  


这个特效在移动端可能会导致有点卡,体验不是很好。如果想要仅仅在 PC 端使用,那么可以这样:


<?php if (!wp_is_mobile()): ?>  
<script src="<?php bloginfo('template_directory'); ?>/js/activate-power-mode.js "></script>  
<script>  
POWERMODE.colorful = true;  // 冒光特效  
POWERMODE.shake = false;    // 抖动特效  
document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效  
</script>  
<?php endif; ?>  


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

食用方法:

在页面中引用 jquery 和 chaffle.min.js


<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>  
<script src="./js/chaffle.min.js"></script>


启用插件对应的 class


<script>  
  $(document).ready(function() {  
    $('.chaffle').chaffle();  
  });   
</script>


html


<a href="#" class="chaffle" data-lang="en">nav01</a>    
<a href="#" class="chaffle" data-lang="en">nav02</a>    
<a href="#" class="chaffle" data-lang="en">nav03</a>    
<a href="#" class="chaffle" data-lang="en">nav04</a>    
<a href="#" class="chaffle" data-lang="zh">中文(汉字)</a>    
<a href="#" class="chaffle" data-lang="zh">懒人的小窝</a>    
<a href="#" class="chaffle" data-lang="ja-katakana">カタカナ</a>


管理员设置回复可下载
两款 Js 插件为你的网站添彩
         本页正文内容约1815个文字
         本文标签:

         版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。

         本文链接:https://suppore.cn/679.html   百度未收录

发表评论

电子邮件地址不会被公开, 推荐使用QQ快速评论!

评论

17条评论
  1. avatar

    py交易 Lv.1 Chrome 63.0.3239.132 Chrome 63.0.3239.132 Windows Windows 回复

    看一下啊

    山东省聊城市 移动

    1. avatar

      bjy Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

      看看

      湖南省永州市 联通

      1. avatar

        Lv.3 IBrowse r IBrowse r GNU/Linux x64 GNU/Linux x64 回复

        支持ing

        浙江省温州市 联通

        1. avatar

          凌一 Lv.1 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows Windows 回复

          密码密码密码密码

          江苏省盐城市 移动

          1. 小陈 Chrome 62.0.3202.94 Chrome 62.0.3202.94 Windows Windows 回复

            回复了凌一:提取码:suppore.cn

                  湖南省 电信

        2. avatar

          张帅 Lv.1 Chrome 63.0.3236.0 Chrome 63.0.3236.0 Windows Windows 回复

          哈哈哈哈哈啊哈哈哈

          山东省青岛市 联通

          1. avatar

            Lv.3 Chrome 62.0.3202.89 Chrome 62.0.3202.89 Windows 7 Windows 7 回复

            提取密码呢

            浙江省温州市 联通

            1. avatar

              Lv.3 Chrome 62.0.3202.89 Chrome 62.0.3202.89 Windows 7 Windows 7 回复

              [code]签到成功!签到时间: 晚上8时33分47秒,签到运到,生活乐逍遥![/code]

              浙江省温州市 联通

              1. avatar

                碧海蓝天 Lv.1 Chrome 53.0.2785.134 Chrome 53.0.2785.134 Android 5.1 Android 5.1 回复

                休息休息

                上海市 电信

                00:00 / 00:00
                顺序播放