<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{margin: 0;padding: 0;}
#box{width: 400px;height: 400px;border: 1px solid #ccc;position: relative;left: 50px;top: 50px;}
#cover{width: 400px;height: 400px;position:absolute;left: 0;top:0;background:#000;opacity: 0.2;display: none;}
#len{width: 90px;height: 90px;position: absolute;left: 0;top: 0;background:url(img/400_1.jpg);}
#big{width: 400px;height: 400px;border: 1px solid #ccc;position: absolute;left: 520px;top:50px;overflow: hidden;}
#big img{position: absolute;}
</style>
</head>
<body>
<div id="box">
<img src="img/400_1.jpg" />
<div id="cover"></div>
<div id="len"></div>
</div>
<div id="big">
<img src="img/800_1.jpg" id="zoo"/>
</div>
</body>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
var lenWidth=$("#len").offsetWidth,
lenHeight=$("#len").offsetHeight,
boxWidth=$("#box").offsetWidth,
boxHeight=$("#box").offsetHeight;
$("#box").οnmοusemοve=function(e){
e=e||event;
offset($("#len"), {
top:e.pageY - lenHeight / 2,
left:e.pageX - lenWidth / 2
});
var _top = $("#len").offsetTop,
_left = $("#len").offsetLeft,
rateX=boxWidth/lenWidth,
rateY=boxHeight/lenHeight;
if(_left<0)
_left=0;
else if(_left>boxWidth-lenWidth)
_left=boxWidth-lenWidth
if(_top<0)
_top=0;
else if(_top>boxHeight-lenHeight)
_top=boxHeight-lenHeight
css($('#len'),{
top:_top+"px",
left:_left+"px"
})
css($("#len"), "backgroundPosition", -_left + "px "+ -_top +"px");
console.log(-_left + "px "+ -_top +"px")
$("#zoo").style.left=-_left*rateX+"px";
$("#zoo").style.top=-_top*rateY+"px";
$("#zoo").style.width=rateX*boxWidth+"px";
$("#zoo").style.height=rateY*boxHeight+"px";
}
$("#box").οnmοuseenter=function(){
$("#len").style.display="block";
$("#big").style.display="block";
$("#cover").style.display="block";
}
$("#box").οnmοuseleave=function(){
$("#len").style.display="none";
$("#big").style.display="none";
$("#cover").style.display="none";
}
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{margin: 0;padding: 0;}
#box{width: 400px;height: 400px;border: 1px solid #ccc;position: relative;left: 50px;top: 50px;}
#cover{width: 400px;height: 400px;position:absolute;left: 0;top:0;background:#000;opacity: 0.2;display: none;}
#len{width: 90px;height: 90px;position: absolute;left: 0;top: 0;background:url(img/400_1.jpg);}
#big{width: 400px;height: 400px;border: 1px solid #ccc;position: absolute;left: 520px;top:50px;overflow: hidden;}
#big img{position: absolute;}
</style>
</head>
<body>
<div id="box">
<img src="img/400_1.jpg" />
<div id="cover"></div>
<div id="len"></div>
</div>
<div id="big">
<img src="img/800_1.jpg" id="zoo"/>
</div>
</body>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
var lenWidth=$("#len").offsetWidth,
lenHeight=$("#len").offsetHeight,
boxWidth=$("#box").offsetWidth,
boxHeight=$("#box").offsetHeight;
$("#box").οnmοusemοve=function(e){
e=e||event;
offset($("#len"), {
top:e.pageY - lenHeight / 2,
left:e.pageX - lenWidth / 2
});
var _top = $("#len").offsetTop,
_left = $("#len").offsetLeft,
rateX=boxWidth/lenWidth,
rateY=boxHeight/lenHeight;
if(_left<0)
_left=0;
else if(_left>boxWidth-lenWidth)
_left=boxWidth-lenWidth
if(_top<0)
_top=0;
else if(_top>boxHeight-lenHeight)
_top=boxHeight-lenHeight
css($('#len'),{
top:_top+"px",
left:_left+"px"
})
css($("#len"), "backgroundPosition", -_left + "px "+ -_top +"px");
console.log(-_left + "px "+ -_top +"px")
$("#zoo").style.left=-_left*rateX+"px";
$("#zoo").style.top=-_top*rateY+"px";
$("#zoo").style.width=rateX*boxWidth+"px";
$("#zoo").style.height=rateY*boxHeight+"px";
}
$("#box").οnmοuseenter=function(){
$("#len").style.display="block";
$("#big").style.display="block";
$("#cover").style.display="block";
}
$("#box").οnmοuseleave=function(){
$("#len").style.display="none";
$("#big").style.display="none";
$("#cover").style.display="none";
}
</script>
</html>