[英]zoom in/out a picture by scroll event
当我在图片上滚动时,需要放大/缩小图片。 我只问您关于如何检测图片上的滚动/滚动? 我正在尝试(我在互联网上找到了它):
$('.map').scroll(function(event){
if(event.originalEvent.wheelDelta /120 > 0) {
alert('scrolling up !');
}
else{
alert('scrolling down !');
}
});
//
.map
是我的照片班。
它对我不起作用....
每当元素的滚动位置更改时,将附加
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>
有很多插件,一个是: GitHub上的wheelzoom :
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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.