爱吾下载 ● 文章资讯

分类分类

jQuery实现页面顶部显示的进度条效果完整实例

更新时间：2026-05-11 01:43:11作者：fang

本文实例讲述了jQuery实现页面顶部显示的进度条效果。分享给大家供大家参考，具体如下：

具体代码如下：

<!Doctype html>

<html>

<head>

<title>页面顶部显示的进度条效果</title>

<meta http-equiv=Content-Type content="text/html;charset=utf-8">

</head>

<body>

<div id="web_loading"><div></div></div>

<script src="jquery1.8.3.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{

z-index:99999;

width:100%;

}

#web_loading div{

width:0;

height:5px;

background:#FF9F15;

}

</style

</body>

</html>

希望本文所述对大家jQuery程序设计有所帮助。

展开全部

相关

手游推荐
说两句网友评论
    我要跟贴
    取消