<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
*{
margin:0;
padding:0;
}
#du {
width:1200px;
height:800px;
margin:100px;
position:relative;
}
. small{
Position:absolute;
width:260px;
height:140px;
left:0px;
top:0px;
}
. sz{
width:100px;
height:100px;
Position:absolute;
left:0;
top:0;
Background:rgba (233,23,233,0.4);
Display:none;
}
. Small img{
width:260px;
height:140px;
}
. big{
margin-left:20px;
Position:absolute;
left:260px;
top:0px;
Display:none;
}
. Big. dz{
width:400px;
height:400px;
Position:absolute;
left:0;
top:0;
Overflow:hidden;
}
. Big img{
width:1040px;
height:560px;
}
</style>
<script type= "Text/javascript" >
Window.onload = function () {
var osmall = document.getelementsbyclassname (' small ') [0];
var obig = document.getelementsbyclassname (' big ') [0];
var oSz = document.getelementsbyclassname (' sz ') [0];
var Odz = document.getelementsbyclassname (' dz ') [0];
var oimg = document.getelementsbytagname (' img ') [1];
var _left = 0;
var _top = 0;
Osmall.onmouseover = function () {
obig.style.display= ' block ';
OSz.style.display = ' block ';
};
Osmall.onmousemove = function (evt) {
var e = evt | | event;
Alert (osmall.offsetleft)
_left = E.CLIENTX-100-OSZ.OFFSETWIDTH/2;
_top = E.CLIENTY-100-OSZ.OFFSETHEIGHT/2;
if (_left<0) {
_left=0;
}else if (_left>osmall.offsetwidth-osz.offsetwidth) {
_left = Osmall.offsetwidth-osz.offsetwidth;
}
if (_top<0) {
_top=0;
}else if (_top>osmall.offsetheight-osz.offsetheight) {
_top = Osmall.offsetheight-osz.offsetheight;
}
OSz.style.left = _left+ ' px ';
OSz.style.top = _top+ ' px ';
oimg.style.marginleft=-4 * _left+ ' px ';
OIMG.STYLE.MARGINTOP =-4 * _top+ ' px ';
};
Osmall.onmouseout = function () {
Obig.style.display= ' None ';
OSz.style.display = ' None ';
};
};
</script>
<body>
<div id= "Du" >
<div class= "small" >
<div class= "sz" ></div>
</div>
<div class= "Big" >
<div class= "DZ" >
</div>
</div>
</div>
</body>
Magnifier Native JS