1.css
<style type="text/css">
body{
margin: 0;
background: pink;
}
.imgWrap{
width: 500px;
margin: 50px auto;
}
.imgWrap img{
width:100%;
}
#mask{
display: none;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:rgba(0,0,0,.9);
}
#mask #tk{
margin:50px auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 0 20px #ffffff;
}
</style>
2.html
<div class="imgWrap">
<img src="照片魔方/img/md1.jpg" alt="" onclick="imgClick(this)"/>
</div>
<div id="mask">
<div id="tk">
<img id="tkImg" src="照片魔方/img/md1.jpg" alt="" onmousewheel="zoomImg(tkImg)"/>
</div>
</div>
3.js
<script>
let mask = document.getElementById("mask");
let tk = document.getElementById("tk");
let tkImg = document.getElementById("tkImg");
function imgClick(obj){
mask.style.display = "block";
tkImg.setAttribute("src",obj.src);
}
function zoomImg(obj){
var zoom = parseInt(obj.style.zoom, 10) || 100;//zoom属性用于设置或检索对象的缩放比例
zoom += event.wheelDelta/12;
if(zoom>0)
obj.style.zoom = zoom + '%';
document.body.style.position = "fixed";
document.body.style.height=100+"%";
document.body.style.width=100+"%";
}
mask.onclick = function(){
document.body.style.position = "initial";
mask.style.display = "none";
}
tkImg.onclick = function(e){
e.stopPropagation();
}
</script>
