<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{ 350px;height: 350px;border: 1px solid #ccc;cursor: pointer;position: relative;float: left;}
#smallbox{ 180px;height: 180px;background: #ccc;opacity: 0.4;display: none;position: absolute;}
#bigbox{ 400px;height: 400px;border: 1px solid #ddd;float: left;margin-left: 30px;display: none;position: relative;overflow: hidden;}
img{position: absolute;}
</style>
</head>
<body>
<div id="box"><img src="img/min.jpg"/><div id="smallbox"></div></div>
<div id="bigbox"><img src="img/max.jpg" id="img"/></div>
</body>
</html>
<script type="text/javascript">
var box=document.getElementById("box");
var smallbox=document.getElementById("smallbox");
var bigbox=document.getElementById("bigbox");
var img=document.getElementById("img");
box.onmouseenter=function(ev){
var ev1=event||window.event;
smallbox.style.display="block";
bigbox.style.display="block";
box.onmousemove=function(ev){
var ev2=event||window.event;
smallbox.style.left=ev2.clientX-box.offsetLeft-smallbox.clientWidth/2+"px";
smallbox.style.top=ev2.clientY-box.offsetTop-smallbox.clientHeight/2+"px";
if(smallbox.offsetLeft<0){
smallbox.style.left=0;
}
if(smallbox.offsetLeft>(box.clientWidth-smallbox.offsetWidth)){
smallbox.style.left=box.clientWidth-smallbox.offsetWidth+"px";
}
if(smallbox.offsetTop<0){
smallbox.style.top=0;
}
if(smallbox.offsetTop>(box.clientHeight-smallbox.offsetHeight)){
smallbox.style.top=box.clientHeight-smallbox.offsetHeight+"px";
}
var sl=box.clientWidth-smallbox.offsetWidth;
var st=box.clientHeight-smallbox.offsetHeight;
var bl=img.offsetWidth-bigbox.clientWidth;
var bt=img.offsetHeight-bigbox.clientHeight;
img.style.left=-(smallbox.offsetLeft/sl)*bl+"px";
img.style.top=-(smallbox.offsetTop/st)*bt+"px";
}
}
box.onmouseleave=function(){
smallbox.style.display="none";
bigbox.style.display="none";
}
</script>