今天在工作中，結合網上的例子自己改寫的一個等待加載的效果。僅在ie8,Firefox,Chrome做過測試正常，其他瀏覽器未做測試。代碼如下
<html>
<title>ie、火狐、Google Chrome下加載等待效果</title>
<style type="text/css">
.query_hint{
border:5px solid #939393;
width:250px;
height:50px;
line-height:55px;
padding:0 20px;
position:absolute;
left:50%;
margin-left:-140px;
top:50%;
margin-top:-40px;
font-size:15px;
color:#333;
font-weight:bold;
text-align:center;
background-color:#f9f9f9;
z-index:1;
}
.query_hint img{position:relative;
top:10px;
left:-8px;
}
.bg{
position:absolute;
width:100%;
height:100%;
background:#aaaaaa;
z-index:10;
top:0;
left:0;
/*ie下設置透明度*/
filter:alpha(opacity=25);
/*火狐、Google Chrome下設置透明度*/
opacity:0.25;
}
-->
</style>
<script
src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function test(){
$("#query_hint").css("display","block");
$("#bg").css("display","block");
setTimeout(close,3000);
}
function close(){
$("#query_hint").css("display","none");
$("#bg").css("display","none");
}
</script>
<body>
<button οnclick="test()">測試</button>
<div class="bg" id="bg" style="display:none;"></div>
<div id="query_hint" class="query_hint" style="display: none;">
<img src="jiazai.gif"/>正在查詢，請稍等...
</body>
</html>