js放大镜效果

<script type="text/javascript">
window.onload = function(){
var Wrap = document.getElementById("wrap")
var img = document.getElementById("img")
var Wrap1 = document.getElementById("warp1")
//抓粉色的框
var Bor = document.getElementById("border")
//
var meng = document.getElementById("meng")

meng.onmousemove = function(e){
// 做兼容获取事件对象
var e = e || window.event;
//获取鼠标位置
var left = e.offsetX || e.layerX
var top = e.offsetY || e.layerY;
//判断红框的的宽度
if(left<=100){
left=100;
}
if(left>=300){
left=300;
}
if(top<=100){
top=100;
}
if(top>=300){
top=300;
}

//获取到那个红色块的位置-100的意思让鼠标到红色框的中间top和left各减一百
Bor.style.left = left-100+'px';
Bor.style.top = top-100+'px';
//把
img.style.left = -2*left+200+'px';
img.style.top = -2*top+200+'px';



}

}

</script>

//////////////////////////////////////////////////////////////////////////////

<div id="wrap">
<img src="img/400.jpg" />
<div id="border">

</div>
<div id="meng">

</div>
</div>
<div id="warp1">
<img style="position: absolute;" src="img/800.jpg" id="img"/>
</div>

/////////////////////////////////css///////////////////////////////////////////

<style type="text/css">
*{
margin: 0;
padding: 0px;
}
#wrap{
width: 400px;
height: 400px;
position: relative;
border: 1px solid;
}
#warp1{
width: 400px;
height: 400px;
position: absolute;
border: 1px solid blue;
left: 450px;
top: 0px;
overflow: hidden;
}
#border{
width: 200px;
height: 200px;
background: pink;
position: absolute;
top: 0px;
left: 0px;
opacity: 0.5;
}
#meng{
width: 400px;
height: 400px;
position: absolute;
top: 0px;
left: 0px;
z-index: 9;
background: black;
opacity: 0.1;
}
</style>