ie、火狐、Google Chrome下加载等待效果

最新推荐文章于 2024-09-20 19:43:05 发布

微笑de生活

最新推荐文章于 2024-09-20 19:43:05 发布

阅读量992

点赞数

分类专栏： html+css+javascript web前端效果文章标签：加载等待效果 ie 8 firefox chrome

本文链接：https://blog.csdn.net/yjb7268888/article/details/52087180

版权

html+css+javascript 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

web前端效果

2 篇文章 0 订阅

订阅专栏

今天在工作中，结合网上的例子自己改写的一个等待加载的效果。仅在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>