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'를 대체 할 경우, 확대 할 수 있습니다 클릭 아웃 (out on click)을 할 수 있지만 확대 버튼의 경우에도 마찬가지입니다. 델타를 올바르게 지정하고 있습니까? 방향을 지정하는 다른 방법이 있습니까?

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