var ImgZoom = function (image, viewer, options) { this._init(image, viewer, options); } ImgZoom.prototype = { _init: function (image, viewer, options) { this._image = $$O.byId(image); //原图 this._viewer = $$O.byId(viewer); //显示框 this._initViewer(); this._MOVE = $$F.bindAsEventListener(this._move, this); // $$E.addEvent(this._image, "mousemove", this._MOVE); $$E.addEvent(document, "mousemove", this._MOVE); }, _initViewer: function () { //初始化显示框 var viewer = this._viewer; $(viewer).css({ "padding": 0, "overflow": "hidden", "position": "absolute" }); //显示图 this._zoom = document.createElement("img"); this._zoom.src = this._image.src; $(this._zoom).css("position", "absolute"); if (!viewer.contains(this._zoom)) { viewer.appendChild(this._zoom); } }, _move: function (e) {//移动 var self = this, image = this._image, zoom = this._zoom, viewer = this._viewer, x = e.pageX, y = e.pageY; //原图位置 var imageRect = { top: parseInt($(image).offset().top), left: parseInt($(image).offset().left), parseInt($(image).width()), height: parseInt($(image).height()) }; $(viewer).show(); if (x > imageRect.left + imageRect.width || x < imageRect.left || y > imageRect.top + imageRect.height || y < imageRect.top) { $(viewer).hide(); } var pos = { //(x - imageRect.left):相对图片的位置 //zoom.width / imageRect.原图、显示图的比例 //viewer.offsetWidth:显示框的宽度，因为需要将图片放到正中央显示，因此 viewer.offsetWidth / 2 left: viewer.offsetWidth / 2 - (x - imageRect.left) * (zoom.width / imageRect.width), top: viewer.offsetHeight / 2 - (y - imageRect.top) * (zoom.height / imageRect.height) }; // $$P.log("log", "viewer.offsetWidth=" + viewer.offsetWidth); x = Math.ceil(Math.min(Math.max(pos.left, viewer.offsetWidth - zoom.width), 0)); y = Math.ceil(Math.min(Math.max(pos.top, viewer.offsetHeight - zoom.height), 0)); zoom.style.left = x + "px"; zoom.style.top = y + "px"; } }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .container { position: relative; } .izImage { width: 300px; cursor: crosshair; } .izImage, .izViewer { border: 1px solid #000; <!-- background: #fff url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_loading.gif) no-repeat center;--> } .izViewer { width: 400px; height: 400px; position: absolute; left: 320px; top: 0px; display: none; } .izViewer div { position: absolute; border: dashed 1px #999; top: 0px; left: 0px; z-index: 999; width: 100%; height: 100%; } </style> </head> <body> <div class="container"> <img alt="../../../images/DSCN0015.JPG" id="idImage" class="izImage" src="../../../images/DSCN0015.JPG" /> <div id="idViewer" class="izViewer"></div> </div> <div id="log"></div> </body> <script src="../../../js/jquery-1.7.2.min.js" type="text/javascript"></script> <!--<script src="../../../js/jquery-1.10.2.min.js"></script> <!--jq 1.9 以上版本，废除了 live，用$.on()代替--> <!--<script src="../../../js/jquery-migrate-1.2.1.min.js"></script>--> <!--加上该引用后可以继续用--> <script src="../../../js/jone.js" type="text/javascript"></script> <script src="ZoomImage_wzq.js" type="text/javascript"></script> <script type="text/javascript"> var iz = new ImgZoom("idImage", "idViewer", {}); </script> </html>