标签:
一个用jQuery实现的简单进度条,当加载页面时,屏幕顶部出现一条极细的小线条,加载页面时会显示加载进度.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery实现的简单进度条效果</title> 6 <style> 7 #web_loading{ 8 z-index:99999; 9 width:100%; 10 } 11 #web_loading div{ 12 width:0; 13 height:5px; 14 background:orange; 15 } 16 </style> 17 </head> 18 <div id="web_loading"> 19 <div></div> 20 </div> 21 <script src="./jquery-1.9.0.min.js" type="text/javascript"></script> 22 <script type="text/javascript"> 23 jQuery(document).ready(function(){ 24 jQuery("#web_loading div").animate({width:"100%"},800,function(){ 25 setTimeout(function(){
jQuery("#web_loading div").fadeOut(500); 26 }); 27 }); 28 }); 29 </script>
标签:
原文地址:http://www.cnblogs.com/sunshinegirl-7/p/5027815.html