使用鼠标滚动放大和缩小

Question

我找到了Manuel Otto的jsfiddle链接，可以在其中使用鼠标滚动放大和缩小单个图像。我进行了更改，以便在放大或缩小第一个图像时所有图像都具有相同的功能。当我转到其余图像并执行这些功能时，放大和缩小功能无法正常工作。

https://jsfiddle.net/ashtech2213/n6xvsyga/

   .container{
  width:500px;
  height:500px;
  overflow:hidden;
}
.slide{
  width:100%;
  height:100%;
  transition: transform .3s;
}
img{
  width:auto;
  height:auto;
  max-width:100%;
}



<div class="container">
  <div class="slide">
    <img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg">
  </div>
</div>
<div class="container">
  <div class="slide">
    <img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg">
  </div>
</div>



    $(document).ready(function (){
    var scroll_zoom = new ScrollZoom($('.container'),4,0.5)
})


function ScrollZoom(container,max_scale,factor){
    var target = container.children()
    var size = {w:target.width(),h:target.height()}
    var pos = {x:0,y:0}
    var zoom_target = {x:0,y:0}
    var zoom_point = {x:0,y:0}
    var scale = 1
    target.css('transform-origin','0 0')
    target.on("mousewheel DOMMouseScroll",scrolled)

    function scrolled(e){
        var offset = container.offset()
        zoom_point.x = e.pageX - offset.left
        zoom_point.y = e.pageY - offset.top

        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        if (delta === undefined) {
          //we are on firefox
          delta = e.originalEvent.detail;
        }
        delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency

        // determine the point on where the slide is zoomed in
        zoom_target.x = (zoom_point.x - pos.x)/scale
        zoom_target.y = (zoom_point.y - pos.y)/scale

        // apply zoom
        scale += delta*factor * scale
        scale = Math.max(1,Math.min(max_scale,scale))

        // calculate x and y based on zoom
        pos.x = -zoom_target.x * scale + zoom_point.x
        pos.y = -zoom_target.y * scale + zoom_point.y


        // Make sure the slide stays in its container area when zooming out
        if(pos.x>0)
            pos.x = 0
        if(pos.x+size.w*scale<size.w)
            pos.x = -size.w*(scale-1)
        if(pos.y>0)
            pos.y = 0
         if(pos.y+size.h*scale<size.h)
            pos.y = -size.h*(scale-1)

        update()
    }

    function update(){
        target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')')
    }
}