只有按下ALT键才能放大鼠标滚轮
我在我的网站中使用google map api v3:地图宽度为100%,高度为450px。 因此,当您滚动页面时,由于滚轮事件缩放地图,它会自动停在地图上。 我不想禁用它,因为它是一种很酷的功能,所以我一直在寻找一种只有在按下ALT键的情况下才能放大鼠标滚轮的方法。 首先,我使用jQuery做到了这一点:
<div id="my_map" class="Scrollable"
onmouseover="hover_div['my_map']=true;" onmouseout="hover_div['my_map']=false;">
“hover_div”是头部定义的全局数组,“map”是全局变量(“scrollwheel”设置为false)
$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
if(ev.altKey && hover_div['my_map']){
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;
var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}
if (!up && -delta > scrollHeight - height - scrollTop) {
$this.scrollTop(scrollHeight);
var mapZoom = parseFloat(map.getZoom());
if(mapZoom > 0){
mapZoom = mapZoom - 1;
map.setZoom(mapZoom);
}
return prevent();
} else if (up && delta > scrollTop) {
$this.scrollTop(0);
var mapZoom = parseFloat(map.getZoom());
if(mapZoom < 21){
mapZoom = mapZoom + 1;
map.setZoom(mapZoom);
}
return prevent();
}
}
});
它正在工作,但是它从中心放大而不考虑鼠标位置,因为默认事件是。
我发现触发Google地图鼠标滚轮事件的小提琴:只有在按下ALT键的情况下,才有办法启动默认事件,但我还没有弄明白。
链接地址: http://www.djcxy.com/p/81523.html上一篇: zoom on mouse wheel only if ALT key is pressed
下一篇: Disable mouse scroll wheel zoom on embedded Google Maps