最近一个项目使用一张图片实现地图类似的效果，即图片以鼠标位置为中心缩放、平移；通过度娘搜索找到几个版本，最终下面这个版本真正实现该功能；具体代码是网上Copy的，若有版权或其他问题，请联系我予以处理，有不当之处，请原作者原谅。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动缩放图片</title>
</head>
<body>
<style>
#log{position: fixed;top: 0;right: 0;width: 200px;background: #eee;color: #333;padding: 5px;}
</style>
<div id="log"></div>
<script>
function log(){
document.getElementById("log").innerHTML = document.getElementById("log").innerHTML+"<br>"+[].join.call(arguments,",")
}
</script>
<style>
*{margin: 0;padding: 0;}
body{background: #333;}
#box{position: relative;overflow: hidden;margin: 50px auto;border: 1px solid #fff;background: #fff;}
#box img{position: absolute;}
</style>
<div id="box" style="width: 500px;height: 500px;">
<img src="http://cdn.iknow.bdimg.com/static/common/pkg/common_z_63fa369.png" style="width:827px; height:262px;" alt="">
</div>
<script>
evnt = function(event) {
var evn = event,
eventDoc, doc, body,
button = evn.button
evn.target = evn.target || evn.srcElement;
// Calculate pageX/Y if missing and clientX/Y available
if (evn.pageX == null && evn.clientX != null) {
eventDoc = evn.target.ownerDocument || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
evn.pageX = evn.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
evn.pageY = evn.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
if (!evn.preventDefault) {
evn.preventDefault = function() {
this.returnValue = false;
}
}
if (!evn.stopPropagation) {
evn.stopPropagation = function() {
this.cancelBubble = true;
}
}
if (evn.which == null && (evn.charCode != null || evn.keyCode != null)) {
evn.which = evn.charCode != null ? evn.charCode : evn.keyCode;
}
// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don‘t use it
if (!evn.which && button !== undefined) {
evn.which = (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));
}
return evn
};
function getOffset(o) {
var left = 0,
top = 0;
while (o != null && o != document.body) {
top += o.offsetTop;
left += o.offsetLeft;
o = o.offsetParent;
}
return {
left: left,
top: top
};
}
;
(function() {
var d = document,
bind = function(b, a, c) {
b.addEventListener ? b.addEventListener(a, function(event) {
c.call(b, evnt(event));
}, false) : b.attachEvent("on" + a, function(event) {
c.call(b, evnt(window.event));
});
},
on = function(b, o) {
for (var a in o) {
bind(b, a, o[a]);
}
};
var isRun,
startX,
startY,
endX,
endY,
rX,
rY,
bgX = 0,
bgY = 0,
$b = d.getElementById("box");
ww = parseInt($b.style.width),
wh = parseInt($b.style.height),
i = $b.getElementsByTagName(‘img‘)[0],
img = i.style,
imgw = parseInt(img.width),
imgh = parseInt(img.height),
scaleSize = 1;
function rs() {
var w, h;
//以完全显示图片为基准,如果改为>，则为以铺满屏幕为基准
if (ww / wh < imgw / imgh) {
w = ww;
h = imgh * ww / imgw;
bgX = 0;
bgY = -(h - wh) / 2;
scaleSize = ww / imgw; //初始比率
} else {
w = imgw * wh / imgh;
h = wh;
bgX = -(w - ww) / 2;
bgY = 0;
scaleSize = wh / imgh;
}
img.width = w + "px";
img.height = h + "px";
img.left = bgX + "px";
img.top = bgY + "px";
}
rs();
/* Init */
on(d, {
"mousedown": function(e) {
//按中建快速还原大小
if (e.which === 2) {
rs();
}
if (e.which === 1 && e.target && (e.target === i || e.target === $b)) {
isRun = true;
startX = e.pageX;
startY = e.pageY;
e.preventDefault();
}
},
"mouseup": function(e) {
if (e.which !== 1) {
return;
}
img.cursor = "default";
isRun = false;
if(typeof(rX)!=="undefined")//这个判断原作没有，去掉该判断会出现单击后，放大缩小不是鼠标位置的情况；处理加载后就点击的情况；即rX是undefined
{
bgX = rX;
bgY = rY;
}
e.preventDefault();
},
"mousemove": function(e) {
//
if (e.which !== 1) {
return;
}
if (isRun) {
e.preventDefault();
img.cursor = "move";
endX = e.pageX;
endY = e.pageY;
rX = bgX + endX - startX;
rY = bgY + endY - startY;
img.left = rX + "px";
img.top = rY + "px";
}
},
"mousewheel": function(e) {
//以鼠标为中心缩放，同时进行位置调整
var deltaY = 0;
var x = e.pageX;
var y = e.pageY;
e.preventDefault();
if (e.target && (e.target === i)) {
var l = getOffset($b);
x = x - l.left;
y = y - l.top;
var p = (e.wheelDelta) / 1200;
var ns = scaleSize;
ns += p;
ns = ns < 0.1 ? 0.1 : (ns > 5 ? 5 : ns); //可以缩小到0.1,放大到5倍
//计算位置，以鼠标所在位置为中心
//以每个点的x、y位置，计算其相对于图片的位置，再计算其相对放大后的图片的位置
bgX = bgX - (x - bgX) * (ns - scaleSize) / (scaleSize);
bgY = bgY - (y - bgY) * (ns - scaleSize) / (scaleSize);
scaleSize = ns; //更新倍率
img.width = imgw * ns + "px";
img.height = imgh * ns + "px";
img.top = bgY + "px";
img.left = bgX + "px";
}
}
});
})();
</script>
</body>
</html>
时间： 2024-10-16 15:01:04