通过滚动事件放大/缩小图片

时间:2016-06-19 17:12:28

标签: javascript jquery scroll uiscrollview zoom

当我滚动图片时,我需要放大/缩小图片。 我只问你如何检测图片上的滚动进/出?我正在尝试这个(我在互联网上找到了它):

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

//

 .map 

是我的照片类。

它对我不起作用....

2 个答案:

答案 0 :(得分:2)

  

附加mousewheel事件,只要元素的滚动位置发生变化,就会发送scroll事件。

$('#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>

答案 1 :(得分:1)

有很多插件,一个是:wheelzoom on GitHub

&#13;
&#13;
window.onload = function() {
  wheelzoom(document.getElementById('map'));
}
&#13;
<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">
&#13;
&#13;
&#13;