给网站导航条添加个有趣的JQuery囧虫特效
首先要保证你的站点引入了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自行更换
(function ($, window) {
var zdo_modules_G = {};
zdo_modules_G.Other = function(){
$(window).on('load', function () {
var clone_num = 7,
tr_time = 600,
change_time = 3600,
clone_time = 7200,
standy_time = 7200,
s_go = '150%',
b_where = '-100%',
last_clone = '';
$('.progressbar i').css('left', '100%');
setTimeout(function(){
$('.progressbar i').css({'width':'2px','border-radius':'2px','background-color':'#49629e'}).addClass('s3600');
var fun = function(){
$('.progressbar i').each(function(){
var l = Math.ceil(Math.random()*100) +'%',
w = Math.ceil(Math.random()*50) +'px';
$(this).css({'left':l, 'width':w});
});
};
var int1 = setInterval(fun, change_time);
var clone_func = function() {
if ( $('.progressbar i').length < clone_num+1 ) {
var l = Math.ceil(Math.random()*2)==1 ? '-300%' : '200%',
clone = $('.progressbar i:last').clone().css({'left':l});
clone.appendTo($('.progressbar'));
} else {
window.clearInterval(int2);
if ( Math.ceil(Math.random()*2) == 1 ) {
s_go = '-150%', b_where = '100%';
} else {
s_go = '150%', b_where = '-100%';
};
setTimeout(function(){
var clone = $('.progressbar i:last').clone().removeClass('s3600').css({'left':b_where, 'width':'100%','background-color':'#b91f1f'});
$('.progressbar i').removeClass('s3600').css({'left':s_go});
setTimeout(function(){
window.clearInterval(int1);
$('.progressbar i').remove();
clone.appendTo($('.progressbar'));
setTimeout(function(){
$('.progressbar i').css({'left':s_go});
setTimeout(function(){
$('.progressbar i').addClass('s3600').css({'width':'10px','background-color':'#49629e'});
int1 = setInterval(fun, change_time);
int2 = setInterval(clone_func, clone_time);
}, tr_time);
}, tr_time);
}, tr_time);
}, standy_time);
};
};
var int2 = setInterval(clone_func, clone_time);
}, 1000);
});
};
$(function() {
zdo_modules_G.Other();
});
})(jQuery, window);
把上面得到的jongchong.js上传到空间，然后通过下面的标签引入js至header.php
<script type="text/javascript" src="https://suppore.cn/jongchong.js"></script>
新建CSS文件并引入
复制以下CSS代码另存为jongchong.css,也可以直接复制进现有模板的css中！
.site-header {
border-bottom: 1px solid #d4d5d1;
}
.site-header:before {
content: '';
position: fixed;
left: 0;
bottom: -3px;
width: 100%;
height: 2px;
background: #fff
}
.progressbar {
overflow: hidden;
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 2px
}
.progressbar i {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: #b91f1f;
-webkit-transition: all .6s ease-out;
-moz-transition: all .6s ease-out;
-ms-transition: all .6s ease-out;
-o-transition: all .6s ease-out;
transition: all .6s ease-out
}
.progressbar i.s3600 {
-webkit-transition: all 3.6s ease-out;
-moz-transition: all 3.6s ease-out;
-ms-transition: all 3.6s ease-out;
-o-transition: all 3.6s ease-out;
transition: all 3.6s ease-out
}
