代码如下:
jsFiddleRun again Edit this fiddle Result HTML
放大镜 
function PhotoZoomer(elements){
this.mask = elements.mask; //蒙版
this.container = elements.container //原图容器
this.originimg = elements.originimg; //原图
this.eventproxy = elements.eventproxy;
this.bigContainer = elements.bigContainer; //大图容器
this.bigimg = elements.bigimg; //大图
this.visible = false;
this._bind();
}
PhotoZoomer.prototype = {
display: function(style){
var self = this;
self.mask.style.display = style;
self.bigContainer.style.display = style;
},
//计算放大蒙版位置
zoom: function(clientX, clientY){
var self = this,
//位置比例
rate = {},
//放大蒙版最大活动范围
maxrange = {
offsetLeft: self.container.offsetWidth - self.mask.offsetWidth,
offsetTop: self.container.offsetHeight - self.mask.offsetHeight
},
//mask left
left = clientX - self.container.offsetLeft - self.mask.offsetWidth/2,
//mask top
top = clientY - self.container.offsetTop - self.mask.offsetHeight/2;
if(left < 0) {
left = 0;
}else if(left> maxrange.offsetLeft) {
left = maxrange.offsetLeft;
}
if(top < 0) {
top = 0;
}else if(top > maxrange.offsetTop){
top = maxrange.offsetTop;
}
//alert(maxrange.offsetTop);
rate.left = left / maxrange.offsetLeft;
rate.top = top / maxrange.offsetTop;
self.mask.style.left = left + 'px';
self.mask.style.top = top + 'px';
self.bigimg.style.left = -rate.left * (self.bigimg.offsetWidth - self.bigContainer.offsetWidth) + "px";
self.bigimg.style.top = -rate.top * (self.bigimg.offsetHeight - self.bigContainer.offsetHeight) + "px";
},
_bind: function(){
var self = this;
self.container.onmouseover = function(e){
e = e || window.event;
var target = e.targe || e.srcElement;
self.display("block");
this.visible = true;
};
self.container.onmouseout = function(e){
e = e || window.event;
var target = e.targe || e.srcElement;
self.display("none");
this.visible = false;
};
self.container.onmousemove = function(e){
e = e || window.event;
if(!this.visible )return;//防止元素大小计算错误
self.zoom(e.clientX, e.clientY);
};
}
};
function get(id){
return document.getElementById(id)
}
var elements = {
mask: get("m"),
container: get("p1"),
originimg: get("z1"),
bigContainer: get("p2"),
bigimg: get("z2"),
eventproxy: get("eventproxy")
};
var zoomer = new PhotoZoomer(elements);
// alert(elements.container.offsetParent.tagName)
放大镜 function PhotoZoomer(elements){
this.mask = elements.mask; //蒙版
this.container = elements.container //原图容器
this.originimg = elements.originimg; //原图
this.eventproxy = elements.eventproxy;
this.bigContainer = elements.bigContainer; //大图容器
this.bigimg = elements.bigimg; //大图
this.visible = false;
this._bind();
}
PhotoZoomer.prototype = {
display: function(style){
var self = this;
self.mask.style.display = style;
self.bigContainer.style.display = style;
},
//计算放大蒙版位置
zoom: function(clientX, clientY){
var self = this,
//位置比例
rate = {},
//放大蒙版最大活动范围
maxrange = {
offsetLeft: self.container.offsetWidth - self.mask.offsetWidth,
offsetTop: self.container.offsetHeight - self.mask.offsetHeight
},
//mask left
left = clientX - self.container.offsetLeft - self.mask.offsetWidth/2,
//mask top
top = clientY - self.container.offsetTop - self.mask.offsetHeight/2;
if(left < 0) {
left = 0;
}else if(left> maxrange.offsetLeft) {
left = maxrange.offsetLeft;
}
if(top < 0) {
top = 0;
}else if(top > maxrange.offsetTop){
top = maxrange.offsetTop;
}
//alert(maxrange.offsetTop);
rate.left = left / maxrange.offsetLeft;
rate.top = top / maxrange.offsetTop;
self.mask.style.left = left + 'px';
self.mask.style.top = top + 'px';
self.bigimg.style.left = -rate.left * (self.bigimg.offsetWidth - self.bigContainer.offsetWidth) + "px";
self.bigimg.style.top = -rate.top * (self.bigimg.offsetHeight - self.bigContainer.offsetHeight) + "px";
},
_bind: function(){
var self = this;
self.container.onmouseover = function(e){
e = e || window.event;
var target = e.targe || e.srcElement;
self.display("block");
this.visible = true;
};
self.container.onmouseout = function(e){
e = e || window.event;
var target = e.targe || e.srcElement;
self.display("none");
this.visible = false;
};
self.container.onmousemove = function(e){
e = e || window.event;
if(!this.visible )return;//防止元素大小计算错误
self.zoom(e.clientX, e.clientY);
};
}
};
function get(id){
return document.getElementById(id)
}
var elements = {
mask: get("m"),
container: get("p1"),
originimg: get("z1"),
bigContainer: get("p2"),
bigimg: get("z2"),
eventproxy: get("eventproxy")
};
var zoomer = new PhotoZoomer(elements);
// alert(elements.container.offsetParent.tagName)
