zoom in/out ein Bild von scroll Ereignis

Question

Ich muss ein Bild vergrößern/verkleinern, wenn ich auf dem Bild scrollen. Ich frage Sie nur darüber, wie man scroll in/out auf dem Bild erkennen? Ich versuche, diese (ich habe es im Internet gefunden):

$('.map').scroll(function(event){ 
       if(event.originalEvent.wheelDelta /120 > 0) { 
       alert('scrolling up !'); 
       } 
      else{ 
       alert('scrolling down !'); 
       } 
      }); 

//

.map 

die Klasse meines Bildes ist.

Es ist nicht für mich arbeiten ....

Answer 1

Attach mousewheel Ereignis als scroll Ereignis, wenn die Bildlaufposition Änderungen des Elements gesendet wird.

$('#map').on('mousewheel', function(e) { 
 
    e.preventDefault(); 
 
    if (e.originalEvent.wheelDelta/120 > 0) { 
 
    console.log('scrolling up !', 'X: ', e.pageX, 'Y: ', e.pageY); 
 
    } else { 
 
    console.log('scrolling down !', 'X: ', e.pageX, 'Y: ', e.pageY); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xft1/v/t1.0-1/p200x200/13096358_986500121418450_5109646388299684610_n.jpg?oh=27ee2801d2df5c9426eef38bb8a45509&oe=57DF3F79&__gda__=1474329392_83b88030c94ec8611160c14161311db5" id="map"> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br>

Answer 2

Es gibt viele Plugins sind, ist: wheelzoom on GitHub:

window.onload = function() { 
 
    wheelzoom(document.getElementById('map')); 
 
}

<script src="https://cdn.rawgit.com/jackmoore/wheelzoom/master/wheelzoom.js"></script> 
 

 
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xft1/v/t1.0-1/p200x200/13096358_986500121418450_5109646388299684610_n.jpg?oh=27ee2801d2df5c9426eef38bb8a45509&oe=57DF3F79&__gda__=1474329392_83b88030c94ec8611160c14161311db5" id="map">