模拟鼠标滚动事件

Question

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

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

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

对这些选项中的任何一个的任何帮助都将非常感谢。

我确实试过了，但似乎什么也没做：

$('#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”，因为我使用的是Chrome，它可以在点击时缩小，但它对放大按钮也是这样做的。我是否正确地指定了增量？有没有不同的方式来指定方向？

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