<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box{
position: relative;
width: 350px;
height: 350px;
margin: 150px;
border: 2px solid silver;
}
#mask{
position: absolute;
top: 0;
left: 0;
width: 175px;
height: 175px;
background-color: pink;
opacity: 0.3;
display: none;
}
#big{
width: 400px;
height: 400px;
position: absolute;
left: 360px;
border: 1px solid silver;
top: 0;
overflow: hidden;
display: none;
}
</style>
</head>
<div id="box">
<div id="small">
<img src="img/001.jpg"/>
<span id="mask"></span>
</div>
<div id="big">
<img src="img/0001.jpg"/>
</div>
</div>
<script type="text/javascript" src="js/animate.js">
</script>
<script type="text/javascript">
var box=document.getElementById("box");
var small=document.getElementById("small");
var big=document.getElementById("big");
var mask=document.getElementById("mask");
var img=big.children[0];
small.onmouseenter=function(){
show(mask);
show(big);
}
small.onmouseleave=function(){
hide(mask);
hide(big);
}
small.onmousemove=function(e){
//获取鼠标的位置作为小遮罩层的移动位置
e=e||window.event;
var pagey=e.pageY||scroll().top+e.clientY;
var pagex=e.pageX||scroll().top+e.clientX;
var xx=pagex-box.offsetLeft-mask.offsetWidth/2;
var yy=pagey-box.offsetTop-mask.offsetHeight/2;
//限制小遮罩层不能出小图片
if(xx<0){
xx=0;
}else if(xx>small.offsetWidth-mask.offsetWidth){
xx=small.offsetWidth-mask.offsetWidth;
}
if(yy<0){
yy=0;
}else if(yy>small.offsetHeight-mask.offsetHeight){
yy=small.offsetHeight-mask.offsetHeight;
}
//小遮罩层走的位置
mask.style.top=yy+"px";
mask.style.left=xx+"px";
//按比例算出大图片走的位置
var dx=xx*(big.offsetWidth/mask.offsetWidth);
var dy=yy*(big.offsetWidth/mask.offsetWidth);
img.style.marginTop=-dy+"px";
img.style.marginLeft=-dx+"px";
}
</script>
</body>
</html>
002D4419BD13904472ABD67BC46889E1.png
