欢迎访问畅维网络官网,我们将为您提供专业的网站建设服务!
咨询电话:0531-88162305 QQ:点击这里给我发消息
当前位置:首页 > 网站学院 > 网站技术

网站建设页面顶部的进度条效果

打开网站任意页面出现一个从左到右移动的进度条,现在不少博客都有采用。 确实能增加网站不少乐趣哈!

代码

<script type="text/javascript">// < ![CDATA[
jQuery("#web_loading div").animate({width:"10%"});
// ]]></script>
<div id="web_loading"><div></div></div>
<script src="http://www.niutw.com/js/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">// < ![CDATA[
    jQuery(document).ready(function(){
        jQuery("#web_loading div").animate({width:"100%"},800,function(){ 
            setTimeout(function(){jQuery("#web_loading div").fadeOut(500); 
            }); 
        }); 
    });

// ]]></script>
<style>
/* Web Loading */
#web_loading{
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:#FF9F15;
}
</style>
(编辑:济南网站建设、济南网站建设公司:畅维网络)

鲁公网安备 37010502000788号

  • 扫一扫,关注微信公众号