<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>
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
用最简单的方法实现原生JS放大镜特效
猜你喜欢
转载自blog.csdn.net/weixin_45761317/article/details/103773668
今日推荐
周排行