最近一个项目使用一张图片实现地图类似的效果，即图片以鼠标位置为中心缩放、平移；通过度娘搜索找到几个版本，最终下面这个版本真正实现该功能；具体代码是网上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>新闻热点
疑难解答
