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

最新推荐文章于 2018-05-22 17:58:00 发布

weixin_34148456

最新推荐文章于 2018-05-22 17:58:00 发布

阅读量115

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/yybk/archive/2012/03/26/2417656.html

版权

<!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;" οnclick="BackFullScreen(this.src)" alt="点击图片" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

转载于:https://www.cnblogs.com/yybk/archive/2012/03/26/2417656.html

weixin_34148456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击图片放大，用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 htt...
复制链接

扫一扫