<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:430px;
height:430px;
overflow: hidden;
position: relative;
cursor: move;
}
#div1 div{
width:150px;
height: 150px;
background-color: rgba(121,11,22,0.2);
position:absolute;
top:0;
left: 0;
display: none;
}
#div2{
width:430px;
height:430px;
overflow: hidden;
position: absolute;
top:8px;
left: 500px;
display: none;
}
#div2 img{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="div1">
<img src="https://img.alicdn.com/imgextra/i2/724195866/TB2E8K1cl0kpuFjy1zdXXXuUVXa_!!724195866.jpg_430x430q90.jpg"/>
<div id="moveDiv"></div>
</div>
<div id="div2">
<img src="https://img.alicdn.com/imgextra/i1/724195866/TB2DMu6cgFkpuFjSspnXXb4qFXa_!!724195866.jpg" id="bigImg"/>
</div>
</body>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var moveDiv = document.getElementById('moveDiv');
var bigImg = document.getElementById('bigImg');
oDiv1.onmouseenter = function(){
moveDiv.style.display = 'block';
oDiv2.style.display = 'block';
}
oDiv1.onmouseleave = function(){
moveDiv.style.display = 'none';
oDiv2.style.display = 'none';
}
oDiv1.onmousemove = function(ev){
var event = ev||window.event;
var T = event.clientY-oDiv1.offsetTop-moveDiv.offsetHeight/2;
var L = event.clientX-oDiv1.offsetLeft-moveDiv.offsetWidth/2;
//移动方块的位置范围限制
if(T<0){
T = 0;
}
if(T>oDiv1.offsetHeight-moveDiv.offsetHeight){
T = oDiv1.offsetHeight-moveDiv.offsetHeight;
}
if(L<0){
L = 0;
}
if(L>oDiv1.offsetWidth-moveDiv.offsetWidth){
L = oDiv1.offsetWidth-moveDiv.offsetWidth;
}
moveDiv.style.top = T+'px';
moveDiv.style.left = L+'px';
//缩放比例
var scaleX = L/(oDiv1.offsetWidth-moveDiv.offsetWidth);
var scaleY = T/(oDiv1.offsetHeight-moveDiv.offsetHeight);
console.log(scaleX);
console.log(scaleY);
bigImg.style.top = -scaleY*(bigImg.offsetHeight-oDiv2.offsetHeight)+'px';
bigImg.style.left = -scaleX*(bigImg.offsetWidth-oDiv2.offsetWidth)+'px';
}
</script>
</html>
