漂亮的页面加载提示信息

最新推荐文章于 2024-07-25 11:26:35 发布

lg_lin

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量3k

点赞数

分类专栏：网页技巧文章标签： function xhtml div border html null

网页技巧专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!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>

lg_lin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
漂亮的页面加载提示信息

天意主页body { background-color: #979797; background-repeat: repeat-x; margin: 0px; padding: 0px;}#loader_container {text-align:
复制链接

扫一扫

专栏目录