首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

页面加载动态效果打造

2013-08-01 
页面加载动态效果制作首先看看效果图:图片和样式可以自己定义,下面是代码:首先是样式:style#loader_cont

页面加载动态效果制作

首先看看效果图:

页面加载动态效果打造

图片和样式可以自己定义,下面是代码:

首先是样式:

<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="页面加载动态效果打造" />
</div>
</div>
</div>
</div>

下面这个是动态图片:

页面加载动态效果打造

一个简单的页面加载动画就完成了。

?

热点排行