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