给网站导航条添加个有趣的JQuery囧虫特效

  • 内容
  • 相关

这个囧虫一开始是在zsimple主题上作为loading动画出现的,感觉能给博客增加活泼的元素,所以就借鉴过来了

GIF.gif

增加囧虫的HTML元素到页面

首先要保证你的站点引入了v1.12.4以上版本的JQuery ,如果没有,可以调用外接地址加载至header.php里。

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

打开主题的header.php文件,定位到

<ul class="nav navbar-nav nav-top"></ul>

的下面(定位的地方因主题而异),也就是博客导航的下面,然后增加HTML代码:QQ截图20170226224126.jpg

<span class="site-header">
<span class="progressbar">
<i class="s3600" style="width: 18px; left: 68%; border-radius: 2px; background-color: rgb(73, 98, 158);"></i>
<i class="s3600" style="width: 20px; left: 62%; border-radius: 2px; background-color: rgb(73, 98, 158);"></i>
</span>
</span>

新建JavaScript文件并引入

新建一个js文件,复制以下js代码,粘贴为jongchong.js,也可以直接复制进现有模板的js中:

需要diy囧虫颜色的可进https://suppore.cn/color自行更换

管理员设置 回复 可见隐藏内容

把上面得到的jongchong.js上传到空间,然后通过下面的标签引入js至header.php

<script type="text/javascript" src="https://suppore.cn/jongchong.js"></script>

新建CSS文件并引入

复制以下CSS代码另存为jongchong.css,也可以直接复制进现有模板的css中!

管理员设置 回复 可见隐藏内容
给网站导航条添加个有趣的JQuery囧虫特效
         本页正文内容约3272个文字
         本文标签:

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

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

发表评论

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

评论

126条评论
  1. avatar

    黄衫飞白马 Lv.5 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

    回复了[白眼]

    湖南省益阳市 移动

    1. avatar

      黄衫飞白马 Lv.5 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows Windows 回复

      签到成功!签到时间: 下午3时39分24秒,签到运到,生活乐逍遥!

      湖南省益阳市 移动

      1. avatar

        爱情 爱情 Lv.1 Chrome 63.0.3239.132 Chrome 63.0.3239.132 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        时代风格哇公司

        福建省 移动

        1. avatar

          ewqewq Lv.1 Firefox 61.0 Firefox 61.0 Windows Windows 回复

          的啊认为热望亲热请问

          广东省广州市 电信

          1. avatar

            灵梦 Lv.2 Chrome 67.0.3396.87 Chrome 67.0.3396.87 Windows 7 Windows 7 回复

            骚年,我怀疑你写了一篇假的文章0

            河南省郑州市 电信

            1. avatar

              Lv.1 Chrome 67.0.3396.99 Chrome 67.0.3396.99 Windows Windows 回复

              www.eyye.cc(╯‵□′)╯︵┴─┴萨顶顶所

              湖北省十堰市 中移铁通

              1. avatar

                灵梦 Lv.2 Chrome 66.0.3359.139 Chrome 66.0.3359.139 Windows Windows 回复

                骚年,我怀疑你写了一篇假的文章

                河南省开封市 电信

                1. avatar

                  纵横三界 Lv.2 uBrowser 6.2.3964.2 uBrowser 6.2.3964.2 Windows Windows 回复

                  可以的ll

                  四川省成都市 移动

                  00:00 / 00:00
                  顺序播放