温江做网站
新网创想网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
图片放大镜-创新互联
目前创新互联建站已为上千多家的企业提供了网站建设、域名、雅安服务器托管、绵阳服务器托管、企业网站设计、清水网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。>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),
width: 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.width:原图、显示图的比例 //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";
}
}
.container{
position: relative; }
.izImage{
width: 300px;
cursor: crosshair; }
.izImage, .izViewer{
border: 1px solid #000;
}
.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%; }