滚轮控制图片放大缩小

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>

点击图片 滑动滚轮放大缩小