点击图片放大，用div半透明遮住整页的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击图片放大</title>

<script type="text/javascript">
var BigImgUrl;
function BackFullScreen(BigImgUrl)
{
var FullScreenDiv=document.getElementById("FullScreenDiv");
FullScreenDiv.style.width=document.body.clientWidth+"px";
FullScreenDiv.style.height=document.body.clientHeight+"px";
FullScreenDiv.style.display="block";

var ShowBigImgDiv=document.getElementById("ShowBigImgDiv");
var ShowBigImgDivPosition;
ShowBigImgDiv.style.display="block";
ShowBigImgDiv.innerHTML="<img src=\""+BigImgUrl+"\" border=\"0\" />";
ShowBigImgDivPosition=document.documentElement.scrollTop;
if (ShowBigImgDivPosition == 0 || ShowBigImgDivPosition == "")
{
ShowBigImgDivPosition=document.body.scrollTop;
}
ShowBigImgDiv.style.top=ShowBigImgDivPosition+((window.screen.height-ShowBigImgDiv.clientHeight)/2-90)+"px";
ShowBigImgDiv.style.left=(window.screen.width-ShowBigImgDiv.clientWidth)/2-10+"px";
}
function BackFullScreenHidde()
{
document.getElementById("ShowBigImgDiv").style.display="none";
document.getElementById("FullScreenDiv").style.display="none";
}
</script>
<style type="text/css">
#ShowBigImgDiv
{
position:absolute;
z-index:10001;
display:none;
cursor:pointer;
}
#FullScreenDiv
{
position:absolute;
z-index:10000;
display:none;
background-color:#000000;
filter:alpha(opacity=50);
opacity:0.5;
cursor:pointer;
}
</style>

</head>

<body>
<div id="ShowBigImgDiv" onClick="BackFullScreenHidde()" title="点击缩小"></div>
<div id="FullScreenDiv" onClick="BackFullScreenHidde()" title="点击缩小"></div>
 
 
 
 
<img src="#" style="width:100px; height:90px;" onclick="BackFullScreen(this.src)" alt="点击图片" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

posted @ 2012-03-26 11:51 憶言阅读(718) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

憶言的博客

点击图片放大，用div半透明遮住整页的代码。