0%

为博客添加鼠标点击特效(富强、民主、文明、和谐...)全平台通用 V2.0

发布于 / 分类: JavaScript / 已有 12 条评论 / 阅读量 2626

最后更新于 2019年01月08日

经过长时间的学习,终于迎来小高潮,更新为2.0版本!

  • 2018-10-5 修复预加载js代码失效bug
  • 2018-11-3 修复了当鼠标在最右侧点击时导致X轴产生滚动条的问题
  • 2019-1-8 更新为2.0版本,修复大量bug,引用自制代码库

预览图:

富强、民主、文明、和谐...

使用要求:

需要引入自制代码库:
[hide]

先引入tool.js 下载:蓝奏云
再引入封装库base.js 下载:蓝奏云
接着引入china.js 下载 : 蓝奏云

[/hide]
引入方法:

以我现在的博客Typecho为例,我们需要在主题的header.php文件中,找到<head></head>元素,在最末尾加上:
[hide]

<script type="text/javascript" src="<?php echo theurl; ?>/js/tool.js"></script>
<script type="text/javascript" src="<?php echo theurl; ?>/js/bese.js"></script>
<script type="text/javascript" src="<?php echo theurl; ?>/js/china.js"></script>

[/hide]
注意顺序,然后就是html的要求了!

html要求要有一个id为footer的元素,这个步入html5后,这个元素基本上是必有的,然后这个这个元素下还要有一个div元素,className为fuqiang,这个div建议是为footer的子元素,结构为#footer>.fuqiang;当然,不是子元素也是可以的,如子元素下的子元素。

html结构:

<footer id="footer">
  <div class="fuqiang"></div>
</footer>

下面就是css部分了,你可以直接丢到主题自带的style.css文件中去,只要class名不冲突即可,如果冲突,请自行修改。
[hide]

/*鼠标点击效果*/

.fuqiang {
    height: 0;
    overflow: hidden;
}

.element {
    font-size: .9rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 0;
    white-space: nowrap;
    position: absolute;
    transition: color .3s;
    animation: elementf 2s;
    animation-fill-mode: forwards;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fuqiang {
    color: #46cdcf;
}

.minzhu {
    color: #a3a7e4;
}

.wenming {
    color: #ce437c;
}

.hexie {
    color: #f8b500;
}

.ziyou {
    color: #53c7f0;
}

.pingdeng {
    color: #db3b61;
}

.gongzheng {
    color: #ff8f56;
}

.fazhi {
    color: #d01257;
}

.aiguo {
    color: #ff7777;
}

.jingye {
    color: #ff7100;
}

.chengxin {
    color: #300532;
}

.youshan {
    color: #7bc74d;
}

@keyframes elementf {
    from {
        clip: auto;
        visibility: visible;
    }
    to {
        visibility: hidden;
        color: transparent;
        transform: translateY(-300px);
        clip: rect(0 0 0 0);
    }
}

[/hide]

上面的都做好后,应该就没问题了。

js调用解析:

目前来说,修改的话,只需要修改china.js文件即可。
[hide]

china(function(){
    //富强民主
    china(document).tagge(function(event){
            china('#footer .fuqiang').rich({
                'value' : '富强',
                'color' : 'fuqiang',
                'event' : event
            })
        },function(event){
            china('#footer .fuqiang').rich({
                'value' : '民主',
                'color' : 'minzhu',
                'event' : event                
            })
        });

我们只需要修改rich中的键值对即可,默认是创建span元素,如果你要改为其他元素,这么写:
rich({
    'element' : 'p',    //假如你要创建p元素
    'value' : '富强',
    'color' : 'fuqiang',
    'event' : event
})

value的值可以自定义的,你想改成什么文字就可以是什么文字。

如:'value' : '俏丽吗'  

color表示的是颜色的class,如果你自定义了class的名称,需要自行修改为对应的名字。

event不要动,非常重要。

如果你自定义了css中的element名字,需要在键值对中加上,假如你改为eee,那么:
rich({
    'element' : 'p',    //假如你要创建p元素
    'className' : 'eee',
    'value' : '富强',
    'color' : 'fuqiang',
    'event' : event
})

如果你还需要再添加一些文字,那么只需要在tagge()中加一个引号,然后复制一遍function(event){};再去修改对应的值即可!

[/hide]

JS 菜单切换 家有女友 在线+本地
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao
  1. cess

    发表于:
    来自 Google Chrome 63 in windows 7

    哈哈哈,这个简介

  2. PiaoR

    发表于:
    来自 Google Chrome 69 in windows 10

    简介牛逼

  3. 2944425878

    发表于:
    来自 Google Chrome 55 in windows 7

    我去DWADEWADEWQD娃娃

  4. wenyi

    发表于:
    来自 QQ浏览器 10 in windows 10

    6

  5. 满庭枫

    发表于:
    来自 QQ浏览器 9 in windows 7

    厉害了博主,这个写的比其他人详细多了

    1. 木灵鱼儿

      发表于:
      来自 FireFox 63 in windows 10
      @满庭枫

      事实上暂时还有一个bug,就是如果dom没有完全加载完是无法调用这个效果的,解决这个bug的方法我已经搞好了,过段时间修改好,你可以再来看看

      1. 满庭枫

        发表于:
        来自 Google Chrome 71 in windows 7
        @木灵鱼儿

        不知道是不是QQ浏览器的bug,回复有问题,看不到回复框。网址已收藏,哈哈

        1. 木灵鱼儿

          发表于:
          来自 FireFox 63 in windows 10
          @满庭枫

          点击一下你的名字,头像右边蓝色的那个,就有了

  6. 猫乐

    发表于:
    来自 Google Chrome 63 in windows 7

    6666来看看

  7. 1的N次幂

    发表于:
    来自 Google Chrome 66 in windows 10

    你们的网站怎么一个XHR请求都没有?都是模板页面吗?

    1. 木灵鱼儿

      发表于:
      来自 FireFox 63 in windows 10
      @1的N次幂

      对啊,每个类目都是模板

  8. 孤星

    发表于:
    来自 Google Chrome 72 in windows 10

    蹭内容