<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#small{400px;height:300px;border:1px green solid;}
#move{100px;height:100px;position:absolute;backgrouond:gray;
left:0px;top:0px;border:1px green solid;}
#big{400px;height:400px;position:absolute;left:500px;
top:0px;overflow:hidden;}
</style>
</head>
<body>
<div id="small"><img src="./images/1 (3).jpg" alt="" width="400px"><div id="move" style="display:none;"></div></div>
<div id="big" style="display:none;">
<img src="./images/1 (3).jpg" alt="" >
</div>
</body>
<script>
//找对象
var small = document.getElementById('small');
var big = document.getElementById('big');
var move = document.getElementById('move');
//鼠标移入小图事件
small.onmousemove = function(e) {
var e = e || event;
//让对应的大图和移动move的div显示
big.style.display = 'block';
move.style.display = "block";
//获取鼠标在小图的坐标
document.title = "X:"+e.clientX+"Y:" +e.clientY;
//将鼠标的坐标赋值于move这个移动div
move.style.left= e.clientX -50+'px';
move.style.top = e.clientY - 50+'px';
//将大图的滚动条调整到鼠标的4倍
big.scrollLeft = e.clientX * 4 -200 ;
big.scrollTop = e.clientY * 4 -190;
if(parseInt(move.style.left) <= 0) {
move.style.left = 0+'px';
}
if(parseInt(move.style.left) >= 300){
move.style.left = 300+'px';
}
if(parseInt(move.style.top) <= 0) {
move.style.top = 0 +'px';
}
if(parseInt(move.style.top) >= 200){
move.style.top = 200+'px';
}
}
//鼠标移出事件
small.onmouseleave = function () {
//鼠标移出大图消失
big.style.display = 'none';
move.style.display = "none";
}
</script>
</html>