<!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>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><img src="#" style="width:100px; height:90px;" οnclick="BackFullScreen(this.src)" alt="点击图片" /></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
转载于:https://www.cnblogs.com/yybk/archive/2012/03/26/2417656.html