Javascript 滚轮变焦反转

Javascript 滚轮变焦反转,javascript,image,scroll,Javascript,Image,Scroll,我找到了一种为我的图像添加滚轮放大/缩小的方法,但是,我似乎无法找到为什么我的图像会被反转。当我在浏览器或IDE上向下滚动时,我的滚动条会向下滚动。所以我很好奇为什么当我在图像上使用滚轮时,它们是反向的。我所说的反转是指当我向上滚动时,它会缩小,当我向下滚动时,它会放大。有人对此有什么建议吗?我贴了一张那个地区代码的图片…如果你还需要什么,请告诉我 谢谢!! 实际代码: function ScrollZoom(container,max_scale,factor) { let targ

我找到了一种为我的图像添加滚轮放大/缩小的方法,但是,我似乎无法找到为什么我的图像会被反转。当我在浏览器或IDE上向下滚动时,我的滚动条会向下滚动。所以我很好奇为什么当我在图像上使用滚轮时,它们是反向的。我所说的反转是指当我向上滚动时,它会缩小,当我向下滚动时,它会放大。有人对此有什么建议吗?我贴了一张那个地区代码的图片…如果你还需要什么,请告诉我

谢谢!!

实际代码:

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

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

        e.preventDefault();
        let delta = e.delta || e.originalEvent.wheelDelta;
        if(delta === undefined) {
            delta = e.originalEvent.detail;
        }
        delta = Math.max(-1, Math.min(1,delta));

        zoom_target.x = (zoom_point.x - pos.x)/scale;
        zoom_target.y = (zoom_point.y - pos.y)/scale;

        scale += delta*factor * scale;
        scale = Math.max(1,Math.min(max_scale,scale));

        pos.x = -zoom_target.x * scale + zoom_point.x;
        pos.y = -zoom_target.y * scale + zoom_point.y;

        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+')');
    }
}


函数滚动缩放(容器、最大刻度、系数){
让target=container.children().first();
设size={w:target.width(),h:target.height()};
设pos={x:0,y:0};
让zoom_target={x:0,y:0};
设zoom_point={x:0,y:0};
设标度=1;
css('transform-origin','0');
打开(“mousewheel-DOMMouseScroll”,滚动显示);
函数滚动(e){
让offset=container.offset();
缩放点x=e.pageX-offset.left;
zoom_point.y=e.pageY-offset.top;
e、 预防默认值();
设delta=e.delta | | e.originalEvent.wheeldta;
如果(增量===未定义){
delta=e.originalEvent.detail;
}
增量=数学最大值(-1,数学最小值(1,增量));
zoom_target.x=(zoom_point.x-pos.x)/scale;
缩放目标y=(缩放点y-位置y)/缩放;
比例+=增量*因子*比例;
scale=Math.max(1,Math.min(max_scale,scale));
pos.x=-zoom_target.x*比例+zoom_point.x;
位置y=-缩放目标y*缩放+缩放点y;
如果(位置x>0)
位置x=0;
如果(位置x+尺寸w*刻度0)
位置y=0;

如果(pos.y+size.h*scale如果缩放方向正好相反,看起来您可以将
delta
取反或乘以
-1
,使正delta变为负delta,负delta变为正。例如,更改此项:

delta = Math.max(-1, Math.min(1,delta));
…致:

delta = -Math.max(-1, Math.min(1, delta));

请在问题中添加一个带有代码的,没有它你不可能得到任何帮助。另外,请发布代码本身,而不是代码的图像。好的,我已经发布了代码-很抱歉,Omgsh,Jacob(很棒的名字,顺便说一下),你是一个救生员!非常感谢!