loading效果

一个很简单实用的loading效果



<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效果 点击下载

posted @ 2009-08-25 16:29  zhangxinwei  阅读(512)  评论(0)    收藏  举报