快捷导航
收起左侧

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

[复制链接]
查看: 1987|回复: 0
  • TA的每日心情

    2021-5-29 13:57
  • 签到天数: 6 天

    连续签到: 1 天

    [LV.2]偶尔看看I

    发表于 2018-9-16 20:11:30 | 显示全部楼层 |阅读模式

    这是一个创建于2018-9-16 20:11的主题,请自行注意信息有效性哦~

    #输入框打字冒光特效
    " h  h( K  m7 @1 X% P在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 Js 特效插件。
    571842a8bffdbaafb384cee51adf6e8f.jpg
    输入框打字冒光效果展示
    普通网站:
    2 ~" B7 I5 o4 }+ Y/ x在网站中引入 activate-power-mode.js (下载地址在文末)
    . {! n8 d# R* S- H; O1 v/ P
    [JavaScript] 纯文本查看 复制代码
    <script src="activate-power-mode.js "></script> 
    : ]/ j5 S" |! ?; X; I* I
    然后再插入一段 JS 进行配置:
    5 x$ r: ?# p: B9 z" X5 V! _2 F
    [JavaScript] 纯文本查看 复制代码
    <script> 
    POWERMODE.colorful = true; // 冒光特效 
    POWERMODE.shake = false; // 抖动特效 
    document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效 
    </script> 
    8 H3 F8 K' e" S. t) k, g  g
    如果是 WordPress 网站,那么先上传 activate-power-mode.js 到 当前主题目录/js 文件夹中,然后打开主题的 footer.php,并在里面插入如下代码即可:
    & z$ v4 V% ?5 X
    [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> 

    - I+ t/ J) I, H2 C9 i这个特效在移动端可能会导致有点卡,体验不是很好。如果想要仅仅在 PC 端使用,那么可以这样:
    " @- f8 m. h0 a" d. a" f
    [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; ?> 
    0 m) U: H( m8 M, m( E

    : Q5 `0 l; @; ^7 X- R; G: o, ]#鼠标滑过随机文字变换特效9 L. N' B/ z) b3 W
    这个特效用起来颇有一股极客的风味~
    ) Z1 Q/ h9 N/ s' w: q+ E& D在页面中引用 jquery 和 chaffle.min.js
    * e: K& d6 g+ [) k! O3 L! z2 v
    [JavaScript] 纯文本查看 复制代码
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> 
    <script src="./js/chaffle.min.js"></script> 

    0 N8 j" Q' W$ c# `6 c) r' _5 T% C启用插件对应的 class
    ! ~- @0 U& S+ e
    [JavaScript] 纯文本查看 复制代码
    <script> 
    $(document).ready(function() { 
    $('.chaffle').chaffle(); 
    }); 
    </script> 

    " e* F  ?# |5 B% G8 t0 H( v接下来是HTML部分
    5 V* M6 C5 U. O9 W3 U# B8 f
    [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> 
    ; X: z. l4 k" z. Z+ F& ?
    #下载地址:https://pan.baidu.com/s/1skPb7q9
    & z7 Q3 K; B. p1 D

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

    本版积分规则

    精彩推荐

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

    2019-01-19 APP源码

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

    2018-12-12 精选资源

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

    2019-06-29 APP源码

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

    2019-08-20 APP源码

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

    2019-09-14 灌水区

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

    2019-06-18 APP源码

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

    2019-06-26 APP源码

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

    2019-03-05 精选资源
    嗨,AV8D ~!X

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

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

    云服务支持

    精彩内容,快速检索

    关注我们

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