【jQuery】页面顶部显示的进度条效果

 1 <!Doctype html>
 2 <html>
 3 <head>
 4 <title>页面顶部显示的进度条效果</title>
 5 <meta http-equiv=Content-Type content="text/html;charset=utf-8">
 6 </head>
 7 <body>
 8 <div id="web_loading"><div></div></div>
 9 <script src="http://files.cnblogs.com/ningvsban/jquery1.8.3.min.js" type="text/javascript"></script>
10 <script type="text/javascript">// < ![CDATA[
11     jQuery(document).ready(function(){
12         jQuery("#web_loading div").animate({"100%"},800,function(){ 
13             setTimeout(function(){jQuery("#web_loading div").fadeOut(500); 
14             }); 
15         }); 
16     });
17 // ]]></script>
18 <style>
19 #web_loading{
20 z-index:99999;
21 100%;
22 }
23 #web_loading div{
24 0;
25 height:5px;
26 background:#FF9F15;
27 }
28 </style
29 </body>
30 </html>

效果：

　　请看本博客首页效果http://www.cnblogs.com/ningvsban/