![2b7012eb76a518f1f4aa3da9743669d5.png](https://i-blog.csdnimg.cn/blog_migrate/17c51179ac0d11393a7e14d1436278da.jpeg)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#big{width:200px;height:200px;position:absolute;overflow:hidden;left:480px;top:20px;display:none;}
</style>
</head>
<body>
<img src="./1.jpg" width="400" id="small" alt="">
<div id="big">
<img src="./1.jpg" alt="">
</div>
</body>
<script>
var big = document.getElementById('big');
var small = document.getElementById('small');
small.onmousemove = function(e){
var e = e || event;
document.title="X:"+e.clientX+"Y:"+e.clientY;
//获取对应的大图的坐标
//将大图的滚动条的位置调整到小图的鼠标坐标的4被的位置
big.scrollLeft = e.clientX*4-80;
big.scrollTop = e.clientY*4-80;
//让对应的大图显示
big.style.display="block";
}
small.onmouseout = function(){
//鼠标移除之后让你的大图隐藏
big.style.display="none";
}
</script>
</html>
效果如下:
![424a69441b9990032beb5c77210414bf.png](https://i-blog.csdnimg.cn/blog_migrate/06001d9020bb78078c96575e4519b512.jpeg)
更多大型互联网web前端实战操作,在线解析,学习指导,学习资源,点:【WEB前端资源】