Question

我有两个具有相同尺寸和相同位置的图像，但根据使用jquery beforeAfter plugin的用户交互，放置在具有动态宽度的div中。

我想使用wheelzoom启用这些图像的滚动缩放，这样放大这些图像之一就可以在与另一个图像相同的位置缩放相同的数量。

我无法做到的是（我想）事件处理程序的链接：

function onwheel(e){
    //adjust image to fit zoom level ...

    other_img.onwheel(e);
}

如果无法做到这一点，是否可以复制事件并更改目标图像？

我正在寻找使用jquery或本机Javascript的解决方案。

Code here（忽略句柄）。

编辑：任何应该工作的顶级指针也将受到赞赏

Answer 1

我做了一个有用的例子：http://plnkr.co/edit/kH0ec8TVMXUIYlMoBaMq?p=preview

这是核心代码：

document.getElementsByClassName("before")[0].addEventListener("wheel", function(event){
  if(flag){
    flag= false;
    return;
  };
  flag=true;
  var newEvent = new WheelEvent("wheel",event);
  var elementToTrigger = document.getElementsByClassName("after")[0]; 
  elementToTrigger.dispatchEvent(newEvent);
});

我做一些简单的事情，当事件发生时（＆＃34; wheel＆＃34;）a触发同一事件到另一个元素并将数据从第一个事件传递给新事件。我使用flag变量来阻止自定义事件触发另一个事件并启动永久循环。

这是一个无需编辑插件源代码的解决方案。如果更改wheelzoom.js的代码，您可以做更好的解决方案。

Answer 2

缩放一个带有足够参数来处理缩放的函数，并从事件处理程序中获取所需的值。

function handleZoom(domNode, zoomDirection, zoomAmount) {
    // Do stuff to change the size of `domNode`
}

var img1, img2;

img1 = /* select image node */;
img2 = /* select image node */;

function handleScroll(scrollEvent) {
    var direction, amount;

    // Use `scrollEvent` to figure out which direction and how far to zoom

    handleZoom(img1, direction, amount);
    handleZoom(img2, direction, amount);
}

img1.onscroll = handleScroll;
img2.onscroll = handleScroll;

滚动缩放两个图像

2 个答案: