收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#big{width:200px;height:200px;position:absolute;left:480px;top:20px;overflow:hidden;display:none;}
</style>
</head>
<body>
<img src="./1.jpg" alt="" id="small" width="400">
<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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
