demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
}
div{
float:left;
}
.box{
background: rgba(0,0,0,0.5);
width:200px;
height:200px;
position: absolute;
display: none;
top:0;
left:0;
}
.big{
position: relative;
overflow:hidden;
width:400px;
height:400px;
display: none;
}
.samll{
width:400px;
height:400px;
position: relative;
cursor:move;
overflow: hidden;
}
#big{
position: absolute;
top: 0;
left:0;
}
</style>
</head>
<body style="overflow:hidden">
<div style="margin:100px 200px">
<div class="samll">
<img src="small.jpg" alt="" />
</div>
<div class="big">
<img src="big.jpg" id="big" alt="" />
</div>
</div>
</body>
<script src="public.js"></script>
<script>
!(function(doc,undefined){
function move(small,big,much){
// if(!this instanceof move)return new move(small,big,much);
this.samll=Object.prototype.toString.call(small).slice(8,-1).toLowerCase()=="string"?flt.getClass(document,small)[0]:!1;
this.simg=this.samll?this.samll.getElementsByTagName("img")[0]:!1;
this.big=Object.prototype.toString.call(big).slice(8,-1).toLowerCase()=="string"?flt.getClass(document,big)[0]:!1;
this.bimg=this.big?this.big.getElementsByTagName("img")[0]:!1;
this.much=much;
this.init();
}
move.prototype={
constructor:this,
init:function(){
var _this=this.samll,
_that=this;
_this.οnmοuseenter=function(e){
_that.seen(e);
return false;
}
},
seen:function(e){
var events=e||window.event,
x=events.pageX,
y=events.pageY,
that=this;
this.box=document.createElement("div");
this.box.className="box";
this.box.style.display="block";
box_x=x-(this.box.offsetWidth/2)-this.samll.offsetLeft;
box_y=y-(this.box.offsetHeight/2)-this.samll.offsetTop;
this.samll.appendChild(this.box);
if(box_x<0){
this.box.style.left=0;
}else if(box_x>this.samll.offsetWidth-this.box.offsetWidth){
this.box.style.left=this.samll.offsetWidth-this.box.offsetWidth+"px";
}
if(box_y<0){
this.box.style.top=0;
}else if(box_y>this.samll.offsetHeight-this.box.offsetHeight){
this.box.style.top=this.samll.offsetHeight-this.box.offsetHeight+"px";
}
this.big.style.display="block";
this.samll.οnmοusemοve=function(e){
that.mover(e);
}
this.samll.οnmοuseleave=function(){
that.leave();
}
},
mover:function(e){
var events=e||window.event,
mx=events.pageX,
my=events.pageY;
box_mx=mx-(this.box.offsetWidth/2)-this.samll.offsetLeft;
box_my=my-(this.box.offsetHeight/2)-this.samll.offsetTop;
this.box.style.left=box_mx+"px";
this.box.style.top=box_my+"px";
this.bimg.style.left=-(box_mx*this.much)+"px";
this.bimg.style.top=-(box_my*this.much)+"px";
if((box_mx)<0){
this.box.style.left=this.bimg.style.left=0;
}else if(box_mx>this.offsetWidth-this.box.offsetWidth){
this.box.style.left=this.offsetWidth-this.box.offsetWidth+"px";
this.bimg.style.left=-(this.bimg.offsetWidth-this.big.offsetWidth)+"px";
}
if(box_my<0){
this.box.style.top=this.bimg.style.top=0;
}else if(box_my>this.offsetHeight-this.box.offsetHeight){
this.box.style.top=this.offsetHeight-this.box.offsetHeight+"px";
this.bimg.style.top=-(this.bimg.offsetHeight-this.big.offsetHeight)+"px";
}
},
leave:function(){
this.box.style.display="none";
this.big.style.display="none";
this.samll.removeChild(this.box);
}
}
new move("samll","big",2);
})(document)
</script>
</html>