Jsfiddlerun again Edit this fiddle result HTML
<! DOCTYPE html>
<meta charset= "gb2312"/>
<title> Magnifier </title>
<style>
img{Vertical-align:bottom;}
. mod_zoom{Overflow:hidden; zoom:1;}
. mod_zoom. p1 {float:left; position:relative; height:350px; width:350px; margin-right:5px;}
Mod_zoom. p1 mask{position:absolute; left:0; top:0; width:175px; height:175px; Background-color: #fede4f; opacity:0.3 ; Filter:alpha (opacity=30); Display:none; }
. mod_zoom. p2{position:relative; width:400px; height:400px; overflow:hidden; display:none;
. mod_zoom. p2 img{position:absolute; left:0; top:0;}
. mod_zoom. ph{width:100%; height:350px; position:absolute; top:0; left:0; cursor:crosshair;
/*background-color:red*/
/* If you bind the event handler function, IE does not set the Background-color property does not trigger the event/}
</style>
<body>
<div>
<div class= "Mod_zoom" >
<div class= "P1" id= "P1" >
<span class= "Mask" id= "M" ></span>
<span class= "ph" id= "Eventproxy" ></span>
</div>
<div class= "P2" id= "P2" >
</div>
</div>
</div>
<script>
function Photozoomer (elements) {
This.mask = Elements.mask; Masked version
This.container = elements.container//original artwork container
this.originimg = elements.originimg; Original
This.eventproxy = Elements.eventproxy;
This.bigcontainer = Elements.bigcontainer; Large Diagram Container
this.bigimg = elements.bigimg; Big picture
This.visible = false;
This._bind ();
}
Photozoomer.prototype = {
Display:function (style) {
var self = this;
Self.mask.style.display = style;
Self.bigContainer.style.display = style;
},
Calculate Magnify Mask Position
Zoom:function (ClientX, ClientY) {
var self = this,
Position ratio
Rate = {},
Enlarge Mask Maximum Active range
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;//prevents element size from being evaluated incorrectly
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)
</script>
</body>
<! DOCTYPE html>
<meta charset= "gb2312"/>
<title> Magnifier </title>
<style>
img{Vertical-align:bottom;}
. mod_zoom{Overflow:hidden; zoom:1;}
. mod_zoom. p1 {float:left; position:relative; height:350px; width:350px; margin-right:5px;}
Mod_zoom. p1 mask{position:absolute; left:0; top:0; width:175px; height:175px; Background-color: #fede4f; opacity:0.3 ; Filter:alpha (opacity=30); Display:none; }
. mod_zoom. p2{position:relative; width:400px; height:400px; overflow:hidden; display:none;
. mod_zoom. p2 img{position:absolute; left:0; top:0;}
. mod_zoom. ph{width:100%; height:350px; position:absolute; top:0; left:0; cursor:crosshair;
/*background-color:red*/
/* If you bind the event handler function, IE does not set the Background-color property does not trigger the event/}
</style>
<body>
<div>
<div class= "Mod_zoom" >
<div class= "P1" id= "P1" >
<span class= "Mask" id= "M" ></span>
<span class= "ph" id= "Eventproxy" ></span>
</div>
<div class= "P2" id= "P2" >
</div>
</div>
</div>
<script>
function Photozoomer (elements) {
This.mask = Elements.mask; Masked version
This.container = elements.container//original artwork container
this.originimg = elements.originimg; Original
This.eventproxy = Elements.eventproxy;
This.bigcontainer = Elements.bigcontainer; Large Diagram Container
this.bigimg = elements.bigimg; Big picture
This.visible = false;
This._bind ();
}
Photozoomer.prototype = {
Display:function (style) {
var self = this;
Self.mask.style.display = style;
Self.bigContainer.style.display = style;
},
Calculate Magnify Mask Position
Zoom:function (ClientX, ClientY) {
var self = this,
Position ratio
Rate = {},
Enlarge Mask Maximum Active range
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;//prevents element size from being evaluated incorrectly
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)
</script>
</body>
