给网站导航条添加个有趣的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快速评论!

评论

114条评论
  1. avatar

    小鑫 Lv.1 Chrome 58.0.3029.110 Chrome 58.0.3029.110 Windows Windows 回复

    对我的

    广东省茂名市 联通

    1. avatar

      消费纠纷 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 Windows 7 回复

      达瓦大哇大无多

      海南省海口市 电信

      1. avatar

        浮生若梦 Lv.1 Sogou Explorer Sogou Explorer Windows 7 x64 Edition Windows 7 x64 Edition 回复

        礼拜

        陕西省西安市 电信

          1. avatar

            丶小溪流__ Lv.1 Firefox 59.0 Firefox 59.0 Windows 7 Windows 7 回复

            表情 写得好好哟,文章大气磅礴,高山流水,有古人之风!!

            山东省烟台市 联通

            1. avatar

              醉生梦死 Lv.1 Chrome 65.0.3325.181 Chrome 65.0.3325.181 Windows Windows 回复

              测试

              山东省临沂市 联通

              1. avatar

                立哥 Lv.2 Chrome 65.0.3325.162 Chrome 65.0.3325.162 Windows 7 x64 Edition Windows 7 x64 Edition 回复

                哈哈,谢谢撸主

                江苏省徐州市 电信

                1. avatar

                  Lv.1 Chrome 64.0.3282.140 Chrome 64.0.3282.140 Windows Windows 回复

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

                  广东省惠州市 电信

                  00:00 / 00:00
                  顺序播放