求思路，求方法，图片在鼠标滚动放大有关问题
日期：2014-05-16 浏览次数：20380 次
求思路，求方法，图片在鼠标滚动放大问题。
最近做一个网站中有一个效果，大家可以把它理解成 谷歌地图，可以拖拽，鼠标滑动放大缩小，只不过是一张图片，有固定的区域大小，超过区域隐藏，基本功能我都实现了，就是有点不完美：
在我鼠标滚动放大缩小的时候都是从左上角开始放大缩小的，我想请问怎么做才能让它以我鼠标所在图片的位置放大缩小呢？
求思路方法
------解决方案--------------------
最近做一个网站中有一个效果，大家可以把它理解成 谷歌地图，可以拖拽，鼠标滑动放大缩小，只不过是一张图片，有固定的区域大小，超过区域隐藏，基本功能我都实现了，就是有点不完美：
在我鼠标滚动放大缩小的时候都是从左上角开始放大缩小的，我想请问怎么做才能让它以我鼠标所在图片的位置放大缩小呢？
求思路方法
------解决方案--------------------
- HTML code
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
