jQuery - 模拟鼠标滚动事件

Question

我使用Jack Moore的Wheelzoom jQuery插件来缩放和拖动SVG图像。

但是，我还需要实现手动放大和缩小按钮。

我能想到的两个选择是在单击按钮时向图像上触发鼠标滚轮事件，或者将按钮单击处理程序添加到插件中。据我所知，触发鼠标滚轮事件时不能指定方向，我真的不知道如何去添加按钮点击处理程序到插件。

任何这些选项的帮助将不胜感激。

我曾尝试这一点，但似乎并没有做任何事情：

$('#site-viewer img').wheelzoom(); 

var mouseWheelUp = $.Event('DOMMouseScroll', {delta: 1}); 
var mouseWheelDown = $.Event('DOMMouseScroll', {delta: -1}); 

$('#zoom-in').click(function() { 
    $('#site-viewer img').trigger(mouseWheelUp); 
}); 

$('#zoom-out').click(function() { 
    $('#site-viewer img').trigger(mouseWheelDown); 
}); 

编辑：如果我取代“DOMMouseScroll”与“滚轮”，因为我使用的浏览器，它能够放大点击，但它也可以放大按钮。我是否正确指定了增量？有指定方向的不同方式吗？

Answer 1

模拟鼠标轮不是个好主意。最好查看插件源代码并理解它的工作原理。

jQuery(function($){ 

    var image = $('img').wheelzoom(); 
    var onwheel = document.onmousewheel ? 'onmousewheel' : 'onwheel'; 

    $('#zoomin').click(function(){ 
     image.get(0)[onwheel]($.Event('mousewheel', { 
      "deltaY": -1, 
      "pageX": image.offset().left + (image.width()/2), 
      "pageY": image.offset().top + (image.height()/2) 
     })); 
    }); 

    $('#zoomout').click(function(){ 
     image.get(0)[onwheel]($.Event('mousewheel', { 
      "deltaY": 1, 
      "pageX": image.offset().left + (image.width()/2), 
      "pageY": image.offset().top + (image.height()/2) 
     })); 
    }); 
});