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/