Javascript 图像缩放更改时的位置 //在新的缩放级别计算相同的位置 var比率=缩放/旧缩放； var xNewImg=xOldImg*比率； var yNewImg=yOldImg*比率； //计算新顶部/左侧 var xStart=-（xNewImg-xTravel）； var yStart=-（yNewImg-yTravel）； img.style.height=parseInt（divStyles.height）*（缩放）+“px”； img.style.width=parseInt（divStyles.width）*（缩放）+“px”； img.style.top=yStart+“px”； img.style.left=xStart+“px”； img.style.cursor=“抓取”； } 功能复位缩放（div、img）{ img.style.top=“0px”； img.style.left=“0px”； img.style.height=div.style.height； img.style.width=div.style.width； img.style.cursor=“默认”； 缩放=1； } 函数getOffset（元素）{ var rect=element.getBoundingClientRect（）； var posX=rect.left+window.pageXOffset；//window.scrollX的别名； var posY=rect.top+window.pageYOffset；//window.scrollY的别名； 返回{ x:posX， y:波西， 左：posX， 上图：波西， 宽度：rect.width， 高度：矩形高度 }; } 函数舍入（数字、精度）{ 精度=精度？+精度：0； var sNumber=number+“”， periodIndex=sNumber.indexOf（'.'）， 系数=数学功率（10，精度）； 如果（周期索引==-1 | |精度=5）{ //修正浮点误差 //因子*10使用精度以外的一位小数 数字+=（数字

使用

translate3d

和

透视图

来处理3d变换，而不是使用

缩放

？此外，将缩放与平移分离使其更简单

$（文档）.ready（函数（）{
var translateX=0，
translateY=0，
translateZ=0，
stepZ=10，
初始对象X=0，
初始目标Y=0，
初始鼠标X=0，
初始_鼠标_Y=0；
函数apply_coords（）{
$（“#幻灯片”）.css（“转换”，“透视（100px）”translate3d（“+translateX+”px，“+translateY+”px，“+translateZ+”px）”）；
}
$（“#slideContainer”）。在（“mousewheel-DOMMouseScroll”，函数（e）上{
e、 预防默认值（）；
var delta=e.delta | | e.originalEvent.wheeldta；
var zoomOut；
如果（增量===未定义）{
delta=e.originalEvent.detail；
zoomOut=delta？delta<0:e.originalEvent.deltaY>0；
zoomOut=！zoomOut；
}否则{
zoomOut=delta？delta<0:e.originalEvent.deltaY>0；
}
如果（zoomOut）{
translateZ=translateZ-stepZ；
}否则{
translateZ=translateZ+stepZ；
}
应用_坐标（）；
});
var是_=false；
$（“#slideContainer”）
.mousedown（函数（e）{
是真的吗；
})
.mousemove（函数（e）{
如果（正在拖动）{
e、 预防默认值（）；
var currentX=e.type=='touchend'？e.changedTouches[0]。pageX:e.pageX；
var currentY=e.type=='touchend'？e.changedTouches[0]。pageY:e.pageY；
translateX=初始值（当前值X-初始值（鼠标值X））；
translateY=初始值（当前值-初始值）；
应用_坐标（）；
}否则{
初始_鼠标_X=e.type=='touchend'？e.changedtouchs[0]。pageX:e.pageX；
初始_鼠标_Y=e.type=='touchend'？e.changedtouchs[0]。pageY:e.pageY；
初始_obj_X=translateX；
初始_obj_Y=translateY；
}
})
.mouseup（函数（）{
is_=false；
});
});
#slideContainer{
宽度：200px；
高度：200px；
溢出：隐藏；
位置：相对位置；
}
#滑梯{
宽度：100%；
身高：100%；
背景：红色；
}
img{
宽度：自动；
高度：自动；
最大宽度：100%；
}
您离它很近，但是最好分别存储x、y和scale，并根据这些值计算变换。它使事情变得更容易+节省资源（无需反复查找dom属性）

我已将代码放入一个漂亮的模块中：

function ScrollZoom(container,max_scale,factor){
    var target = container.children().first()
    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+')')
    }
}

参数包括：

容器：要缩放的元素的包装。脚本将
查找容器的第一个子级并应用转换
去吧
最大比例：最大比例（4=400%缩放）
系数：缩放速度（1=+100%缩放/鼠标滚轮刻度）
不相关，但我还必须使用占位符b/c之类的东西，因为另一个图像被阻止了。出于某种原因，我无法缩小。我发现这个插件似乎可以做你想做的事情：顺便说一句，我最终放弃了它，改用了panzoom：我的问题仍然存在。如果缩放（例如，左上角的某个位置，然后放大右下角），图像会跳跃。我坚持使用translate，因为我试图增强iDangerous Swipper zoom，他们使用translate。我坚持使用scale，因为我试图增强iDangerous Swipper zoom，他们使用scale这似乎可行。为什么要将“变换原点”设置为0,0。我想让它保持在50%。50%，因为它是默认的逻辑是基于变换原点在x:0，y:0。但是你当然可以修改它。我很难修改它以用于中心的变换原点，应该修改什么？@jsilverist你需要在x和y坐标上增加一半的宽度。比如
pos.x+=size.w*scale/2
@jsilverist-sure-thing，breh。公平地说，它实际上是
size.w*（scale-1）/2
，我的错。
<div id="slideContainer">
  <div id="slide">
    <img src="http://content.worldcarfans.co/2008/6/medium/9080606.002.1M.jpg"></img>
  </div>
</div>

#slideContainer{
  width:500px;
  height:500px;
  overflow:hidden;
}
#slide{
  width:100%;
  height:100%;
}
img{
  width:auto;
  height:auto;
  max-width:100%;
}

function ScrollZoom(container,max_scale,factor){
    var target = container.children().first()
    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+')')
    }
}

new ScrollZoom($('#container'),4,0.5)