滚动缩放两个图像

Question

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

我想使用 wheelzoom 对这些图像启用滚动缩放，这样对其中一张图像的缩放将在与另一张图像相同的位置缩放相同的数量。

我无法做到的是（我想）按照以下方式链接事件处理程序：

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

    other_img.onwheel(e);
}

如果这不可能，是否可以复制事件并更改目标图像？

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

Code here（忽略句柄）。

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

Answer 1

使缩放成为一个函数，该函数采用足够的参数来处理缩放，并从事件处理程序中获取所需的值。

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;

Answer 2

我做了一个有效的例子：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);
});

我做了一些简单的事情，当一个事件发生时 ("wheel") 将同一事件触发到另一个元素，并将第一个事件的数据作为参数传递给新事件。我使用标志变量来阻止自定义事件再次触发另一个事件并开始一个永恒的循环。

这是一种无需编辑插件源代码的解决方案。改一下wheelzoom.js的代码可以做更多好的解决方案。

滚动缩放两个图像

scroll zoom on two images

javascript

event-handling

zooming