javascript - 模拟鼠标滚动事件

我正在使用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'替换为'mousewheel'，则因为我使用的是Chrome，它能够在点击时缩小，但是它对于放大按钮也是如此。我是否正确指定增量？有没有其他指定方向的方法？

最佳答案

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

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

关于javascript - 模拟鼠标滚动事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23558305/