类似地图 放大缩小记住鼠标位置

 

function mousewheelEvent(event, delta){
				var img = $(g.getActiveImage());
				if (event.target != img[0]) {
					return;
				}
				var evt = event || window.event;
				if (evt.preventDefault) {
					evt.preventDefault();
					evt.stopPropagation();
				} else {
					evt.returnValue = false;
					evt.cancelBubble = true;
				}
				var mouseX = event.pageX;
				var mouseY = event.pageY;
				var w = img.width();
				var h = img.height();
				var ILeft = img.offset().left;
				var ITope = img.offset().top;
				var bigT = 100;
				var scal = bigT / w;
				var bigH = h * scal;
				var relXScal = (mouseX - ILeft) / w;
				var relYScal = (mouseY - ITope) / h;
				var wRSLen = bigT * delta;
				var hRSLen = bigH * delta;
				img.css("width", w + wRSLen);
				img.css("height", "auto");
				img.css("margin", "0 auto");
				var pos = {
					left : ILeft - wRSLen * relXScal,
					top : ITope - hRSLen * relYScal
				};
				img.offset(pos);
				$(".galleria-image").css("overflow", "auto");
		}

简单的类似地图 放大缩小记住鼠标位置算法

很重要的几点：

 

1. 鼠标滚轮滚动事件支持IE8，使用了jquery 的插件 mousewheel
2. left top 必须使用offset获取及设置
3. 必须禁止滚轮浏览器默认行为，比如上滚是滚动条往上。必须禁止