本日的演习是做一个网购网站罕见的图片概况引见的放大镜结果，简朴来讲就是图片中有对应的地区让你看到放大后的结果。
关于规划：就是两组div，第一组大div放图片，小的是遮盖层。第二组是大图div显现框，内里放大张图片，凌驾部份隐蔽，可以设想下是透过窗户看表面，你看到的只是一部份。
思绪：就是双方的比例，重点，比例，话不说，直接上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0 ; padding:0;}
#left{width:300px;
height:300px;
border:1px solid gold;
position:relative;
float:left;
margin-right:20px;
left:10px;
top:10px;}
#left img{width:300px;
height:300px;}
#mask{width:90px;
height:90px;
background:greenyellow;
opacity: 0.5;
position: absolute;
top:0;
left:0;
display:none;
cursor: move;}
#big{width:600px;
height:600px;
overflow: hidden;
float: left;
position:relative;
left: 10px;
top:10px;
display:none;
border:1px solid goldenrod;}
#big img{position: absolute;
left:0;
top:0;}
</style>
</head>
<body>
<div id="left">
<img src="img/5-140526101943.jpg" />
<div id="mask"></div>
</div>
<div id="big">
<img src="img/5-140526101943.jpg" />
</div>
<script>
// 左侧遮罩层与左侧显现框大小的比例对应大图显现区与图片的比例
window.onload = function(){
var left = document.getElementById("left");
var mask = document.getElementById("mask");
var big = document.getElementById("big");
var bigImg = big.children[0];
//鼠标移入，遮罩层显现，大图显现区显现
left.onmouseenter = function(){
mask.style.display = big.style.display ='block';
};
//鼠标移出，遮罩层隐蔽，大图显现区隐蔽
left.onmouseleave = function(){
mask.style.display= big.style.display = 'none';
};
//鼠标挪动，遮罩层追随鼠标，大图显现相关内容
left.onmousemove = function(ev){
//兼容IE
var ev = ev || event; //鼠标在遮罩层中居中显现，鼠标的位置-显现区到body的间隔-遮罩层的一半
//背面是赋值给遮罩层的间隔，所以用到减，鼠标位置稳定，是遮罩层在变，所以须要用到减,遮罩层往回挪
var l = ev.clientX-this.offsetLeft-mask.offsetWidth/2;
var t = ev.clientY-this.offsetTop-mask.offsetHeight/2;
//不让遮罩层出左侧显现框的局限
if(l<=0){
l=0
}else if(l>=left.clientWidth - mask.offsetWidth){
l = left.clientWidth - mask.offsetWidth
}
if(t<=0){
t=0
}else if(t>=left.clientHeight - mask.offsetHeight){
t = left.clientHeight - mask.offsetHeight
}
//比例,将可以挪动的间隔做比例
var percX = l/(this.clientWidth- mask.offsetWidth);
var percY = t/(this.clientHeight- mask.offsetHeight);
//大图显现区
bigImg.style.left = -percX*(bigImg.offsetWidth - big.clientWidth)+'px';
bigImg.style.top = -percY*(bigImg.offsetHeight - big.clientHeight)+'px';
//遮罩层的位置
mask.style.left = l +'px';
mask.style.top = t +'px';
};
};
</script>
</body>
</html>
这是做完的结果，我不知怎样插进去图片文件，建议您可以本身拿张图片，修正下地点就行，最好是等宽高的，另有一点就是，假如你觉着遮罩层和显现地区的图片差太多，那你就可以修正下遮罩层的大小就好了。
