<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#box{width: 400px;height: 400px;position: relative;}
#wrin{width: 200px;height: 200px;background: rgba(250,250,250,.5);position: absolute;left:0;top:0;}
#box1{width: 400px;height: 400px;overflow: hidden;position: absolute;left:410px;top:8px;}
#box1>img{position: absolute;}
</style>
</head>
<body>
<div id="box">
<img src="img/img1_400x400.jpg"/>
<div id="wrin"></div>
</div>
<div id="box1"><img src="img/img1_800x800.jpg" id="show" /></div>
</body>
<script type="text/javascript">
var oBox=document.getElementById('box'),
oWrin=document.getElementById('wrin'),
oShow=document.getElementById('show');
oBox.onmouseover=function(ev){
var oEv=house||event;
var x=oEv.clientX-oBox.offsetLeft-oWrin.offsetWidth/2;
var y=oEv.clientY-oBox.offsetTop-oWrin.offsetHeight/2;
if(x<0){
x=0;
}else if(x>oBox.offsetWidth-oWrin.offsetWidth){
x=oBox.offsetWidth-oWrin.offsetWidth
}
if(y<0){
y=0;
}else if(y>oBox.offsetHeight-oWrin.offsetHeight){
y=oBox.offsetHeight-oWrin.offsetHeight
}
oWrin.style.left=x+'px';
oWrin.style.top=y+'px';
var scale=oShow.offsetWidth/oBox.offsetWidth;
oShow.style.left=-x*scale+'px';
oShow.style.top=-y*scale+'px';
}
</script>
</html>
