Home > Developer > Web Develop
<!doctype html>
<meta charset= "Utf-8" >
<style>
#small {
width:300px;
height:300px;
border: #000 1px solid;
Float:left;
position:relative;
}
#small img {
width:300px;
height:300px;
}
#small span {
Display:block;
width:120px;
height:120px;
background:red;
Opacity:. 5;
border: #333 1px solid;
Position:absolute;
left:0;
top:0;
Display:none;
}
#big {
width:300px;
height:300px;
border: #000 1px solid;
Float:left;
margin-left:20px;
Overflow:hidden;
position:relative;
Display:none;
}
#big img {
Position:absolute;
}
</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 ';
}
}
</script>
<body>
<div id= "small" >
<span id= "Mask" ></span>
</div>
<div id= "Big" >
</div>
</body>
JS Picture Magnifier
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
