您的位置：首页 > 其它

漂亮的页面加载提示信息

2008-06-26 14:18 357 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>天意主页</title>

<style type="text/css">

body {

background-color: #979797;

background-repeat: repeat-x;

margin: 0px;

padding: 0px;

}

#loader_container {text-align:center;

position:absolute;

top:50%;

width:100%;

left: 0;

}

#loader {font-family:Tahoma, Helvetica, sans;

font-size:11.5px;

color:#dbdbdb;

background-color:#000;

padding:10px 0 16px 0;

margin:0 auto;

display:block;

width:130px;

border:1px solid #fff;

text-align:left;

z-index:2;

}

#progress {height:5px;

font-size:1px;

width:1px;

position:relative;

top:1px;

left:0px;

background-color:#707070}

#loader_bg {background-color:#e7e7e7;position:relative;top:8px;left:8px;height:7px;width:113px;font-size:1px}

</style>

<script>

var t_id = setInterval(animate,20);

var pos=0;

var dir=2;

var len=0;

function animate()

{

var elem = document.getElementById('progress');

if(elem != null) {

if (pos==0) len += dir;

if (len>32 || pos>79) pos += dir;

if (pos>79) len -= dir;

if (pos>79 && len==0) pos=0;

elem.style.left = pos;

elem.style.width = len;

}

}

function remove_loading() {

this.clearInterval(t_id);

var targelem = document.getElementById('loader_container');

targelem.style.display='none';

targelem.style.visibility='hidden';

}

</script>

</head>

<body onLoad="remove_loading();">

<div id="loader_container">

<div id="loader" z-index＝10>

<div align="center">演示页面正在加载中 ...</div>

<div id="loader_bg"><div id="progress"> </div></div>

</div>

</div>

<img src="http://www.ry168.net/images/photo/001.jpg" width="200" height="200" />

<img src="http://www.ry168.net/images/photo/002.jpg" width="200" height="200" />

<br /><img src="http://www.ry168.net/images/photo/003.jpg" width="200" height="200" />

<img src="http://www.ry168.net/images/photo/004.jpg" width="200" height="200" />

<img src="http://www.ry168.net/images/photo/005.jpg" width="200" height="200" />

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航