loading效果

最新推荐文章于 2024-09-21 22:08:36 发布

weixin_33889245

最新推荐文章于 2024-09-21 22:08:36 发布

阅读量52

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangxinwei/archive/2009/08/25/1553767.html

版权

一个很简单实用的loading效果

Code
<html>
<head>
<title>
</title>
<script type="text/javascript" src="http://o.thec.cn/zhangxinwei/js/jquery-1.3.2.js"></script>
<style>
body{text-align:center;}
#loading{left:50%;margin-left:-150px;width:300px;top:50%;margin-top:-52px;height:100px;position:absolute;z-index:2;text-align:center;}
#bg{filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;width:100%;height:100%;position:absolute;left:0px;top:0px;z-index:1;}
</style>
<script type="text/javascript">
$(function(){
//var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;
//$("#bg").css({display:"block",height:h+"px"});
})

$(window).load(function(){
$("#loading").hide();
$("#bg").hide();
})
</script>
</head>
<body>

<div id="bg">
</div>
<div id="loading">
<div>loading content,please wait

..</div>
<div><img src='http://o.thec.cn/zhangxinwei/images/loading.gif' alt="loading.." /></div>
</div>

<iframe style="width:600;height:600px;margin:0 auto;" src="http://zhangxinwei.qyun.net"></iframe>
</body>

</html

loading效果点击下载

转载于:https://www.cnblogs.com/zhangxinwei/archive/2009/08/25/1553767.html