我为作为宠物项目工作的浏览器游戏创建了俯视图。
我有一个固定大小的视口div和一个内部div，其中包含我所有的地图图标元素。我正在使用jquery-ui来使内部div可拖动，但是我还希望能够通过鼠标滚轮给它一个缩放效果。
我已经进行了一些谷歌搜索，但是似乎没有解决该问题的好方法。
我尝试了这个：
$('#map').bind('DOMMouseScroll mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
$("#map").css("width", "+=10");
}
else{
$("#map").css("width", "-=10");
}
});
但是它什么也没做，所以我想我没有绑定正确的事件。（是的，我正在文档（就绪）中运行该jQuery代码）
弄清楚了。这是后代的代码：
$('#map').bind('mousewheel DOMMouseScroll', function(e){
//Get the transformation matrix from the css as a string. (it's named differently for different browsers)
var scale = $(this).css('transform');
scale = (scale == null ? $(this).css('-webkit-transform') : scale);
scale = (scale == null ? $(this).css('-ms-transform') : scale);
//once we have the matrix, the scale is the first number, so parse the string to remove it.
scale = scale.split(" ");
scale = parseFloat(scale[0].substring(7, scale[0].length - 1));
//e.originalEvent tells us how the mousewheel moves. (Also different for different systems)
e.delta = null;
if (e.originalEvent) {
if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
}
//If delta is greater than 0, we're zooming in
if(e.delta > 0) {
//5x zoom is the max that I want to zoom in.
if(scale < 5) {
//no need to re-form the matrix. specifying a new scale value will do the job.
scale = ('scale(' + (scale + .1).toString() + ')');
//update the transform css for each possible browser.
$(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale });
}
}
//if delta is less than zero, we're zooming out
else{
//for my purposes, I don't want to zoom out farther than the original map size
if(scale > 1) {
scale = ('scale(' + (scale - .1).toString() + ')');
$(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale });
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句