<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style type= "Text/css" >
*{
margin:0;
padding:0;
}
. container{
width:400px;
height:400px;
position:relative;
}
. leftbox{
position:relative;
width:400px;
height:400px;
}
. left{
width:400px;
height:400px;
Position:absolute;
top:0;
left:0;
}
. rightbox{
width:400px;
height:400px;
Position:absolute;
left:420px;
top:0;
Overflow:hidden;
Display:none;
}
. right{
width:800px;
height:800px;
Position:absolute;
}
. pointer{
width:100px;
height:100px;
Background:black;
Opacity:. 5;
Cursor:move;
Position:absolute;
top:0;
left:0;
Display:none;
Color:white;
}
</style>
<script>
Window.onload=function () {
var leftbox=document.queryselector (". Leftbox");
var left=document.queryselector (". Left");
var pointer=document.queryselector (". Pointer");
var rightbox=document.queryselector (". Rightbox");
var right=document.queryselector (". Right");
Leftbox.onmouseover=function () {
pointer.style.display= "Block";
rightbox.style.display= "Block";
}
Leftbox.onmouseout=function () {
Pointer.style.display= "None";
Rightbox.style.display= "None";
}
Leftbox.onmousemove=function (event) {
var oevent=event| | window.event;
var X=oevent.clientx;
var Y=oevent.clienty;
pointer.innertext=x+ ":p x;" + "" +y+ ":p x";
L=X-POINTER.OFFSETWIDTH/2;
T=Y-POINTER.OFFSETHEIGHT/2;
if (X<POINTER.OFFSETWIDTH/2) {
l=0;
}else if (X>=LEFTBOX.OFFSETWIDTH-POINTER.OFFSETWIDTH/2) {
L=leftbox.offsetwidth-pointer.offsetwidth;
}
if (Y<POINTER.OFFSETHEIGHT/2) {
t=0;
}else if (Y>LEFTBOX.OFFSETHEIGHT-POINTER.OFFSETHEIGHT/2) {
T=leftbox.offsetheight-pointer.offsetheight;
}
pointer.style.left=l+ "px";
pointer.style.top=t+ "px";
var imgl= (rightbox.offsetwidth-right.offsetwidth)/(Leftbox.offsetwidth-pointer.offsetwidth);
var imgt= (rightbox.offsetheight-right.offsetheight)/(Leftbox.offsetheight-pointer.offsetheight);
right.style.left=imgl*l+ "px";
right.style.top=imgt*t+ "px";
}
}
</script>
<body>
<div class= "Containter" >
<div class= "Leftbox" >
<div class= "Pointer" ></div>
</div>
<div class= "Rightbox" >
</div>
</div>
</body>
JS Dom Magnifier