<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{padding: 0;margin: 0}
#div1{width: 180px;height: 180px;position: relative;overflow: hidden;margin: 100px}
#div1 span{width: 100px;height: 100px;background:yellow;position: absolute;top: 0;left: 0;opacity: 0.5;filter: alpga(opacity=50);display: none}
#div2{ width:500px; height:500px; position:absolute; left:400px; top:200px; overflow:hidden;display: none}
#div2 img{ position:absolute; left:0; top:0;}
</style>
</head>
<body>
<div id="div1">
<img src="images/b2.jpg" alt="">
<span></span>
</div>
<div id="div2">
<img src="images/b1.jpg">
</div>
<script>
var oDiv =document.querySelector("div");
var oSpan=document.querySelector("span");
var oDiv2 = document.getElementById('div2');
var img2 = oDiv2.getElementsByTagName('img')[0];
oDiv.onmouseenter=function(){
oSpan.style.display='block';
oDiv2.style.display="block"
};
oDiv.onmouseleave=function(){
oSpan.style.display='none';
oDiv2.style.display="none"
};
oDiv.onmousemove=function(ev){
var ev=ev||window.event;
var L =ev.clientX -oDiv.offsetLeft-oSpan.offsetWidth/2;
var T =ev.clientY -oDiv.offsetTop-oSpan.offsetHeight/2;
if(L<0){
L=0;
}else if(L>oDiv.offsetWidth-oSpan.offsetWidth){
L=oDiv.offsetWidth-oSpan.offsetWidth;
console.log(L)
};
if(T<0){
T=0
}else if(T>oDiv.offsetHeight-oSpan.offsetHeight){
T=oDiv.offsetHeight-oSpan.offsetHeight
T = oDiv.offsetHeight - oSpan.offsetHeight;
}
oSpan.style.left=L+'px';
oSpan.style.top=T+'px';
var scaleX =L/(oDiv.offsetWidth -oSpan.offsetWidth);
var scaleY =T/(oDiv.offsetHeight -oSpan.offsetHeight);
img2.style.left=scaleX*(oDiv2.offsetWidth -img2.offsetWidth) +'px';
img2.style.top=scaleY*(oDiv2.offsetHeight -img2.offsetHeight) +'px';
};
//用比例控制大图的活动范围
//onmouseenter onmouseleave 不会冒泡，另外也可以使用遮罩防止事件冒泡
</script>
</body>
</html>