首页>>Jquery文字>>平滑的进度条加载网页内容(2014-02-07)

平滑的进度条加载网页内容

平滑的进度条加载网页内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <section class="container">  
  2. <div class="progress"> <span class="blue" style="width:0%;"><span>0%</span></span> </div>  
  3. </section>  

 

JavaScript Code
  1. <script type='text/javascript'>  
  2.     function loading(percent){  
  3.         $('.progress span').animate({width:percent},1000,function(){  
  4.             $(this).children().html(percent);  
  5.             if(percent=='100%'){  
  6.                 $(this).children().html('Loading Complete, Redirect to Home Page...    ');  
  7.                 setTimeout(function(){  
  8.                     $('.container').fadeOut();  
  9.                     location.href="http://www.freejs.net";  
  10.                 },1000);  
  11.             }  
  12.         })  
  13.     }  
  14.   </script>   

 


原文地址:http://www.freejs.net/article_jquerywenzi_255.html