<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
*{margin:0;padding:0;}
#small {
width:350px;
height:350px;
border:1px solid #000;
position:relative;
Float:left;
margin-right:20px;
}
#big img{
Position:absolute;
}
#mask {
Display:block;
width:50px;
height:50px;
opacity:0.5;
background:red;
Display:none;
Position:absolute;
left:0;
top:0;
}
#big {
width:350px;
height:350px;
Float:left;
border:1px solid #000;
Overflow:hidden;
Display:none;
position:relative;
}
</style>
<script>
Window.onload=function () {
var Osmall=document.getelementbyid (' small ');
var Omask=document.getelementbyid (' Mask ');
var Obig=document.getelementbyid (' big ');
var Oimg=document.getelementbyid (' bigimg ');
Osmall.onmouseover=function () {
omask.style.display= ' block ';
obig.style.display= ' block ';
};
Osmall.onmouseout=function () {
Omask.style.display= ' None ';
Obig.style.display= ' None ';
};
Osmall.onmousemove = function (EV) {
var oevent = EV | | Event
var L = OEVENT.CLIENTX-OMASK.OFFSETWIDTH/2;
var t = OEVENT.CLIENTY-OMASK.OFFSETHEIGHT/2;
if (L < 0) {
L= 0;
}else if (L > Osmall.offsetwidth-omask.offsetwidth) {
L = osmall.offsetwidth-omask.offsetwidth;
}
if (T < 0) {
t = 0;
}else if (t >osmall.offsetheight-omask.offsetheight) {
t = osmall.offsetheight-omask.offsetheight;
}
OMask.style.left = l + ' px ';
OMask.style.top = t + ' px ';
oimg.style.left=l* (obig.offsetwidth-oimg.offsetwidth)/
(osmall.offsetwidth-omask.offsetwidth) + ' px ';
oimg.style.top=t* (obig.offsetheight-oimg.offsetheight)/
(osmall.offsetheight-omask.offsetheight) + ' px ';
}
Osmall.onmousemove=function (EV) {
var oevent=ev| | Event
Var l=oevent.clientx-omask.offsetwidth/2;
Var t=oevent.clienty-omask.offsetheight/2;
if (l<0) {
l=0;
} else if (L > Osmall.offsetwidth-omask.offsetwidth) {
l=osmall.offsetwidth-omask.offsetwidth;
}
if (t<0) {
t=0;
} else if (t>osmall.offsetheight-omask.offsetheight) {
t=osmall.offsetheight-omask.offsetheight;
}
omask.style.left=l+ ' px ';
omask.style.top=t+ ' px ';
oimg.style.left=l* (obig.offsetwidth-oimg.offsetwidth)/
(osmall.offsetwidth-omask.offsetwidth) + ' px ';
oimg.style.top=t* (obig.offsetheight-oimg.offsetheight)/
(osmall.offsetheight-omask.offsetheight) + ' px ';
}
}
</script>
<body>
<div id= "small";
<span id= "Mask" ></SPAN>
</div>
<div id= "big";
</div>
</body>
JS Small effect-image Magnifier effect