jQuery - эмулирует событие прокрутки мыши

Question

jQuery - эмулирует событие прокрутки мыши

0

Я использую плагин 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);
});

EDIT: если я заменю "DOMMouseScroll" на "mousewheel", поскольку я использую Chrome, он может уменьшить масштаб нажатием кнопки, но это также делает кнопку увеличения. Я правильно определяю дельту? Есть ли другой способ указания направления?

Bobe 09 май 2014, в 09:40

Источник

Теги:

javascript

jquery

svg

javascript-events

1 ответ

Ещё вопросы

Gromo · Answer 1 · 2014-05-09T05-34-00.000Z

Эмулировать колесико для мыши - не очень хорошая идея. Лучше посмотреть исходный код плагина и понять, как он работает.

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