javascript - 滚动缩放两个图像

Question

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

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

我无法做的是(我想)按照以下方式链接事件处理程序:

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

    other_img.onwheel(e);
}

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

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

Code here (忽略 handle )。

编辑:任何指向什么应该起作用的顶级指针也将不胜感激

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

我做了一些简单的事情，当事件发生(“轮子”)时，触发相同的事件到另一个元素，并将数据作为参数从第一个事件传递到新事件。我使用标志变量来阻止自定义事件再次触发其他事件并启动永恒循环。

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