<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.little{
display: block;
}
.imgcon{position: relative; 300px;height: 300px;border: 1px solid gray}
.inner{ 50px;height: 50px;position:absolute;background: url("img/dot.png") repeat}
.fangda{300px;height:300px;position: relative;overflow: hidden;border: 1px solid gray}
.lit{position: absolute;1800px;height:1800px;}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class="imgcon">
<div class="inner" ></div>
<img class="little" src="img/mihou.png" width="300px" height="300px">
</div>
<div class="fangda" >
<img class="lit" src="img/mihou.png">
</div>
<script>
$(".imgcon").on("mousemove",function(e){
var ml=$(this).width()-$(".inner").width();
var mb=$(this).height()-$(".inner").height();
var innerpox=(e.clientX-$(".little").offset().left)-($(".inner").width()/2);
var innerpoX=function(){
var result=innerpox;
if(innerpox<0){
result=0
}
if(innerpox>ml){
result=ml;
}
return result;
}()
var innerpoy=(e.clientY-$(".little").offset().top)-($(".inner").height()/2);
var innerpoY=function(){
var result=innerpoy;
if(innerpoy<0){
result=0
}
if(innerpoy>mb){
result=mb;
}
return result;
}()
$(".inner").css("left",innerpoX).css("top",innerpoY);
$('.lit').css("left",-innerpoX*6).css("top",-innerpoY*6+"px")
})
</script>
</body>
</html>