小洋娱乐网-全网资源免费共享平台-www.wuiso.com-投稿奖励1-88元-免费建站平台
此处广告位可在后台设置
大家都在搜 辅助活动QQ飞车骗子
此处广告位可在后台设置

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

发布:邵先森2018-1-9 21:35分类: 网页js代码 这篇文章木有标签 浏览:187字数:3335 去评论(1)

增加囧虫的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自行更换

(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  
}




正文到此结束

小洋娱乐网-版权声明

1  除非特别注明,文章均为小洋娱乐网原创,转载时请注明来源

2 <本站资源来自互联网搜集,如有侵权请联系我们删除>

百度已收录[点击提交]

3  本文标题:【给网站导航条添加个有趣的JQuery囧虫特效】
4  本文衔接:http://www.wuiso.top/post-919.html  [生成短网址]
 
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

1条评论
  1. avatar

    小洋vier 回复

    表情 有点看不懂哦,希望下次写的简单易懂一点!
    表情 好羞射,文章真的好赞啊,顶博主!
    签到成功!签到时间:下午11:12:35 表情 ,每日打卡,生活更精彩哦~

    四川省成都市 联通

    此处广告位可在后台设置
    TOP