Javascript 根据光标位置平移和缩放（在鼠标滚轮上）

我的代码的目的是能够平移和缩放div元素。除了从中心进行缩放（这是正常的），它工作得非常好。我需要div根据光标位置进行缩放（有点像GoogleMaps zoom works），所以我使用transform origin将缩放从中心移动到光标位置。它工作得非常好，除了每当我改变鼠标位置再次缩放时，div元素“跳跃”几个像素，在“跳跃”之后，它的工作（缩放和平移）再次非常好

我认为原因是我没有正确计算新的距离（缩放后），因为div的原点发生了变化

有人能帮上忙吗

注意：如果我缩小然后放大到完全相同的比例，就不会有“跳跃”

如果我不够清楚，您可以在此处查看我的代码：

window.onload=函数（）{
初始化图像（）；
};
函数初始化图像（）{
var recElements=document.getElementsByClassName（“rec”）；
var rec=接受方[0]；
记录平移={}；
rec.imageZoom=100；
rec.stoprecMove=函数（）{
this.panning.xMouseDown=null；
this.panning.yMouseDownn=null；
};
rec.recMove=函数（）{
var-dx=0；
var-dy=0；
var scale=this.imageZoom*0.01；
var pos=this.getBoundingClientRect（）；
dx=（this.panning.xMove-this.panning.xMouseDown）/scale；
dy=（this.panning.yMove-this.panning.yMouseDown）/scale；
dx=startOffsetX+dx；
dy=开始时间设置+dy；
var xZoom=this.xZoom；
var yZoom=this.yZoom；
var xTransform=xZoom-dx；
var yTransform=yZoom-dy；
var dxInPixel=dx+“px”；
var dyInPixel=dy+“px”；
this.style.transform=“translate”（“+dxInPixel+”，“+dyInPixel+”）+“scale”（+scale+”）；
this.style.transformOrigin=xtTransform+“px”+“”+ytTransform+“px”；
this.lastX=dx；
this.lastY=dy；
};
rec.onmousewheel=功能（e）{
this.panning.xMove=0；
this.panning.yMove=0；
this.panning.xMouseDown=0；
this.panning.yMouseDown=0；
this.xZoom=e.clientX；
this.yZoom=e.clientY；
if（typeof this.lastX==“未定义”）{
startOffsetX=0；
startOffsetY=0；
}
否则{
startOffsetX=this.lastX；
startOffsetY=this.lastY；
}
var zoom=rec.imageZoom；
var delta=event.detail？event.detail*-120:event.wheeldta；
缩放+=增量/15；
如果（缩放>300）缩放=300；否则如果（缩放<30）缩放=30；
rec.imageZoom=缩放；
this.recMove（）；
};
rec.onmousedown=函数（e）{
var xMouseDown=e.clientX；
var yMouseDown=e.clientY；
console.log（“x:+xMouseDown+”y:+yMouseDown）；
this.panning.xMouseDown=xMouseDown；
this.panning.yMouseDown=yMouseDown；
if（typeof this.lastX==“未定义”）{
startOffsetX=0；
startOffsetY=0；
}
否则{
startOffsetX=this.lastX；
startOffsetY=this.lastY；
}
e、 预防默认值（）；
};
rec.onmousemove=函数（e）{
if（this.panning.xMouseDown&&this.panning.yMouseDown）{
this.panning.xMove=e.clientX；
this.panning.yMove=e.clientY；
this.recMove（）；
e、 预防默认值（）；
}
};
rec.onmouseup=函数（）{
this.stoprecMove（）；
};
rec.onmouseout=函数（）{
this.stoprecMove（）；
};
}

.rec{
宽度：200px；
高度：100px；
背景图像：重复线性渐变（向右，黄色，灰色10%，绿色15%，黄色30%，灰色40%，绿色45%，黄色60%，灰色70%，绿色75%，黄色90%，灰色100%）；
位置：固定；
排名：0；
左：0；