一個基於jquery的頁面預載入效果(loading)

1,在代碼<head></head>里加入以下jquery:

[javascript] view plain copy
  1. $(window).load(function(){  
  2.     $("#loading").hide();  
  3. })  

 

2,在裏<body></body>加入以下代碼:

[xhtml] view plain copy
  1. <div id="loading">  
  2. Loading content, please wait..  
  3. <img src="loading.gif" mce_src="loading.gif" alt="loading.." />  
  4. </div>  

 

在裏的這代碼必須保證在網頁載入的最前面。

接着是css代碼:

 

[xhtml] view plain copy
  1. #loading{  
  2. position:absolute;  
  3. width:300px;  
  4. top:0px;  
  5. left:50%;  
  6. margin-left:-150px;  
  7. text-align:center;  
  8. padding:7px 0 0 0;  
  9. font:bold 11px Arial, Helvetica, sans-serif;  
  10. }  

 

一個基於jquery的loading效果就完成咯。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章