快捷导航
收起左侧

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

[复制链接]
查看: 1579|回复: 0
  • TA的每日心情
    奋斗
    2020-8-6 16:03
  • 签到天数: 5 天

    连续签到: 1 天

    [LV.2]偶尔看看I

    发表于 2018-9-16 20:11:30 | 显示全部楼层 |阅读模式
    <
    #输入框打字冒光特效
    在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 Js 特效插件。
    571842a8bffdbaafb384cee51adf6e8f.jpg
    输入框打字冒光效果展示
    普通网站:
    在网站中引入 activate-power-mode.js (下载地址在文末)
    [JavaScript] 纯文本查看 复制代码
    <script src="activate-power-mode.js "></script> 

    然后再插入一段 JS 进行配置:
    [JavaScript] 纯文本查看 复制代码
    <script> 
    POWERMODE.colorful = true; // 冒光特效 
    POWERMODE.shake = false; // 抖动特效 
    document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效 
    </script> 

    如果是 WordPress 网站,那么先上传 activate-power-mode.js 到 当前主题目录/js 文件夹中,然后打开主题的 footer.php,并在里面插入如下代码即可:
    [JavaScript] 纯文本查看 复制代码
    <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 端使用,那么可以这样:
    [JavaScript] 纯文本查看 复制代码
    <?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
    [JavaScript] 纯文本查看 复制代码
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> 
    <script src="./js/chaffle.min.js"></script> 

    启用插件对应的 class
    [JavaScript] 纯文本查看 复制代码
    <script> 
    $(document).ready(function() { 
    $('.chaffle').chaffle(); 
    }); 
    </script> 

    接下来是HTML部分
    [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> 

    下载心急但严禁灌水,累计灌水达到5次以上将会禁言哦~

    本版积分规则

    精彩推荐

    [影视APP]五级分销版全网VIP影视APP源码,

    2019-01-19 APP源码

    [影视双端]无限代理版全网VIP影视APP源码,

    2018-12-12 精选资源

    [特别有意思]兴奋的文学:青龙季,看看新来

    2019-09-14 修仙之道

    [影视双端]双端影视APPV3全新后台,下载页

    2019-06-29 APP源码

    [双端影视]影视双端APP带商城系统,全新后

    2019-06-18 APP源码

    [影视双端主题]无限代理版星空极简双端H5前

    2019-03-05 精选资源

    [影视双端]360影视双端H5源码,ThinkPHP新

    2019-06-26 APP源码

    [双端盒子]影视双端直播盒子源码,自定义资

    2019-08-20 APP源码

    喜欢给你阳光,让你充满活力!

    • 反馈建议:2327299920@qq.com
    • 工作时间:周一~周五

    云服务支持

    精彩内容,快速检索

    关注我们

    Copyright© 盒子云 - 你笑起来真好看~  Powered by Discuz!    ( 蜀ICP备18033287号-3 )