Javascript遮罩层(图片浏览)

<html>
<head>
<style type="text/css">
<!--
#div1{
position:absolute;
visibility:hidden;
filter:alpha(opacity=70);
background-color:#000;
}
#div2{
position:absolute;
width:300px;
height:250px;
visibility:hidden;
left:expression_r((body.clientWidth-300)/2);
background-color:#CCCCCC;
text-align:center;
}
-->
</style>
<title>JavaScript背景渐变,居中</title>
</head>
<body>
<div id="div1" align="center">

</div>
<div id="div2">
 <img style="cursor:hand;" src="http://www.chinauo.com/she/admin/Upfiles/2007812232337.jpg" border="0" width="100%" height="100%" onClick="loading();"><br>
 <a href="#" style="font-size:12px" onClick="unload();">关闭</a>
</div>
<img style="cursor:hand;" src="http://www.chinauo.com/she/admin/Upfiles/2007821231312314.jpg" border="0" width="150" height="100" onClick="loading();">
<img style="cursor:hand;" src="http://www.chinauo.com/she/admin/Upfiles/2007812232337.jpg" border="0" width="150" height="100" onClick="loading();"><br>
<img style="cursor:hand;" src="http://www.chinauo.com/she/admin/Upfiles/2007814125333635.jpg" border="0" width="150" height="100" onClick="loading();">
<img style="cursor:hand;" src="http://www.chinauo.com/she/admin/Upfiles/200772235653848.jpg" border="0" width="150" height="100" onClick="loading();">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>

</body>
</html>
<script language="javascript">
var ti = null;
function loading(){
var tmd = 0;
var x1 = document.body.clientWidth; 
var y1 = document.body.clientHeight;
 with(div1){
  style.width=x1+20;
  style.height=y1;
  style.overflowX="hidden";
  style.overflowY="hidden";
  style.visibility="visible";
 }
 div1.style.left=0;
 div1.style.top=document.body.scrollTop;
 div1.style.filter='Alpha(Opacity=0)';
 document.body.style.overflowX="hidden";
 document.body.style.overflowY="hidden";
 div2.style.top=parseInt(document.body.scrollTop)+((document.body.clientHeight-250)/2);
 div2.style.visibility="visible";
 ti = setInterval("hei()",10);
}
var x = 0;
function hei(){
 x+=10;
 if(x<81){
  div1.style.filter='Alpha(Opacity='+x+')';
 }
}
function unload(){
 div1.style.visibility="hidden";
 div2.style.visibility="hidden";
 //document.body.style.overflowX="visible";
 //document.body.style.overflowY="visible";
 clearInterval(ti);
 x=0;
}
</script>

<script type="text/javascript" id="wumiiRelatedItems"> </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值