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”＆＃39;使用＆＃39; mousewheel＆＃39;，因为我使用的是Chrome，它可以缩小点击次数，但它也适用于放大按钮。我正确指定了delta吗？是否有不同的指定方向的方法？

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

jQuery - 模拟鼠标滚动事件

1 个答案: