用最简单的方法实现原生JS放大镜特效
原创
<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>效果如下：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录