求思路，求方法，图片在鼠标滚动放大问题。

最近做一个网站中有一个效果，大家可以把它理解成谷歌地图，可以拖拽，鼠标滑动放大缩小，只不过是一张图片，有固定的区域大小，超过区域隐藏，基本功能我都实现了，就是有点不完美：
在我鼠标滚动放大缩小的时候都是从左上角开始放大缩小的，我想请问怎么做才能让它以我鼠标所在图片的位置放大缩小呢？
求思路方法

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="wangtd"/>
<title>Colors</title>
<style type="text/css">
.container {
position: relative;
margin: 100px auto;
width: 720px;
height: 450px;
overflow: hidden;
border: solid 1px #000000;
}
</style>
</head><body>
<div class="container">
<img id="image" style="position:absolute;top:0;left:0;width:720px;height:450px" src="http://hiphotos.baidu.com/442595744/pic/item/5c0b7d2e0dd722d7023bf63e.jpg" alt=""/>
</div>
<div id="info"></div>
<script type="text/javascript">
var imageHandler = function(id,max,min) {
var _handler = document.getElementById(id);
var _moveTop = 0;
var _moveLeft = 0;
var _moveFlag = false;
function startMove() {
_moveFlag = true;
var evt = window.event;
_moveTop = evt.clientY - parseInt(_handler.style.top);
_moveLeft = evt.clientX - parseInt(_handler.style.left);
};
function doMove() {
if (!_moveFlag) {
return false;
}
var evt = window.event;
_handler.style.top = evt.clientY - _moveTop + "px";
_handler.style.left = evt.clientX - _moveLeft + "px";
};
function endMove() {
_moveFlag = false;
_handler.releaseCapture();
};
function doScale() {
var evt = window.event;
var topPercent = (evt.clientY - _handler.getBoundingClientRect().top)/parseInt(_handler.style.height);
var leftPercent = (evt.clientX - _handler.getBoundingClientRect().left)/parseInt(_handler.style.width);
if (_handler.scrollWidth + evt.wheelDelta < min || _handler.scrollWidth + evt.wheelDelta > max) {
return;
}
var percent = _handler.scrollHeight/_handler.scrollWidth;
_handler.style.width = _handler.scrollWidth + evt.wheelDelta + "px";
_handler.style.height = parseInt(_handler.style.width)*percent + "px";

_handler.style.top = parseInt(_handler.style.top) - topPercent*percent*evt.wheelDelta + "px";
_handler.style.left = parseInt(_handler.style.left) - leftPercent*evt.wheelDelta + "px";
};

_handler.onmousedown = startMove;
_handler.onmousewheel = doScale;
document.onmousemove = doMove;
document.onmouseup = endMove;
};
imageHandler("image", 1440, 144);
</script>
</body>
</html>IE8测试通过
这是一个数学几何问题。设A为鼠标指向的位置，滚轮每次缩放的大小为D，
若使A点不动，则图片的[top]和[left]分别移动的距离为[h2-h1]和[w2-w1]，
h2-h1=h1/h0*D，w2-w1=w1/w0*D，
这样图片缩放的时候，它的位置就不会变了。
非常感谢楼上的回答，完美解决了我的问题，又学习到了新的知识。我是这样理解的：每次缩放的倍数为：M，初始宽：W高：H，鼠标滚动时的坐标值是X、Y
当滚动的时候获取图片的offset.left、offset.top、style.top、style.left这4个值
缩放后鼠标点所在位置会有 (Y-offset.top)/H = (Y-newoffset.top)/M*H
这样我可以计算出缩放之后的图片的新的offset.top，那么这个图片的缩放后的top值就等于：
newTop=style.top+(newoffset.top-offset.top）
left的值也可以同上原理计算出来。