<style>
body{
width: 960px;
margin: 40px auto;
}
#small{
width: 350px;
height: 450px;
border:1px solid green;
position: absolute;
overflow: hidden;
}
#small img{
width: 100%;
height: 100%;
}
div{
float:left;
}
#move{
width: 100px;
height: 100px;
position: absolute;
top:0px;
left:0px;
background-color: black;
display: none;
opacity:0.4;
}
#look_girl{
position: absolute;
left:0px;
top:0px;
}
#big{
border:1px solid red;
width: 340px;
height:340px;
overflow: hidden;
display: none;
position: absolute;
}
</style>
<body>
<div id="small">
<img src="./images/3.jpg" />
<p id="move"></p>
</div>
<div id="big">
<img src="./images/3.jpg" id="look_girl" />
</div>
</body>
<script>
var smallObj = document.getElementById(‘small‘);
var moveObj = document.getElementById(‘move‘);
var bigObj = document.getElementById(‘big‘);
var girlObj = document.getElementById(‘look_girl‘);
smallObj.onmousemove = function(eve){
var e = eve || window.event;
var mouseX = e.clientX;
var mouseY = e.clientY;
var moveLeft = mouseX-smallObj.offsetLeft-moveObj.offsetWidth/2;
var moveTop = mouseY - smallObj.offsetTop-moveObj.offsetHeight/2;
if(moveLeft<0) moveLeft=0;
var endLeft = smallObj.offsetWidth-moveObj.offsetWidth
if(moveLeft>endLeft) moveLeft = endLeft;
if(moveTop<0) moveTop=0;
var endTop = smallObj.offsetHeight-moveObj.offsetHeight;
if(moveTop>endTop) moveTop=endTop;
moveObj.style.left = moveLeft+‘px‘;
moveObj.style.top = moveTop+‘px‘;
moveObj.style.display = ‘block‘;
bigObj.style.display = ‘block‘;
bigObj.style.left = smallObj.offsetLeft+smallObj.offsetWidth+‘px‘;
bigObj.style.top = smallObj.offsetTop+‘px‘;
var girlLeft = moveLeft/(smallObj.offsetWidth-moveObj.offsetWidth)*(bigObj.offsetWidth-girlObj.offsetWidth);
var girlTop = moveTop/(smallObj.offsetHeight-moveObj.offsetHeight)*(bigObj.offsetHeight-girlObj.offsetHeight);
console.log(girlLeft,girlTop);
girlObj.style.top = girlTop+‘px‘;
girlObj.style.left = girlLeft+‘px‘;
}
smallObj.onmouseleave = function(){
moveObj.style.display = ‘none‘;
bigObj.style.display = ‘none‘;
}
</script>
思路：
原文：https://www.cnblogs.com/wshj120828/p/11487681.html