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