頁面加載動態效果製作

首先看看效果圖：

圖片和樣式可以自己定義，下面是代碼：

首先是樣式:

<style>
#loader_container {
text-align:center;
position:fixed;
top:70px;
left:0;
width:100%;
z-index:10000;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;
}
* html #loader_container {
position:absolute;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:12px;
color:#004a8f;
background-color:#ecf5ff;
display:block;
width:200px;
border:1px solid #81b9ff;
text-align:left;
margin:0 auto;
padding:5px 0;
}
#loader div {
margin: 4px 0;
}

</style>

然後在頁面中添加javascript代碼:

<script type="text/javascript">
document.onreadystatechange=function()
{
if(document.readyState=="complete")
{
document.getElementById('loading').style.display='none';
}
}
</script>

最後在頁面上添加以下html代碼:

<div id="loading" style="position:absolute;width:100%;height:100%;left:0px;top:0px;background-color:#ffffff;filter:alpha(opacity=100)">
<div id="loader_container">
<div id="loader">
<div align="center">數據正在加載中,請稍候……</div>
<div align="center">
<img src="../images/loading.gif" alt="loading" />
</div>
</div>
</div>
</div>

下面這個是動態圖片：

一個簡單的頁面加載動畫就完成了。