图片点击放大
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
/*全屏显示大图*/
.opacityBottom{
width: 100%;
height: 100%;
position: fixed;
background:rgba(0,0,0,0.8);
z-index:1000;
top: 0;
left: 0
}
.none-scroll{
overflow: hidden;
height: 100%;
}
.bigImg{
margin-top: 200px;
width:50%;
left:20%;
top:10%;
position:fixed;
z-index: 10001;
}
</style>
</head>
<body>
<td width="350">
<div>
<img height="100" width="100" src="./2.jpg" onclick="clickToBigImg()"/>
</div>
<div>
<img height="100" width="100" src="./1.jpg" onclick="clickToBigImg()"/>
</div>
</td>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
</div>
<script>
function clickToBigImg(){//绑定图片函数
//var clickImgId = $(this).attr("id");
var imgsrc = $('img').attr('src');
alert(imgsrc);
var opacityBottom = '<div id="opacityBottom" style="display: none"><img class="bigImg" src="'+ imgsrc +'" ></div>';
$(document.body).append(opacityBottom);
toBigImg();//变大函数
}
function toBigImg(){
$("#opacityBottom").addClass("opacityBottom");
$("#opacityBottom").show();
$("html,body").addClass("none-scroll");//下层不可滑动
$(".bigImg").addClass("bigImg");
/*隐藏*/
$("#opacityBottom").bind("click",clickToSmallImg);
$(".bigImg").bind("click",clickToSmallImg);
var imgHeight = $(".bigImg").prop("height");
if(imgHeight < 5){
$(".bigImg").css({"top":(h-imgHeight)/2 + 'px'});
}else{
$(".bigImg").css({"top":'0px'});
}
function clickToSmallImg() {
$("html,body").removeClass("none-scroll");
$("#opacityBottom").remove();
}
};
</script>
</body>
</html>
标签：top,height,点击,opacityBottom,imgHeight,var,bigImg,放大,图片 来源： https://blog.csdn.net/weixin_45672607/article/details/118964909