因实现了一个图片放大镜效果的小功能，觉得有意思，所以把制作想法和最终代码分享出来。
先说一下制作想法
没想到的是这个小功能难点还是挺多的，如果没找对思路做起来还是挺费劲的。
例如一开始，最困扰我的一点是如何只放大并显示图片的一部分，隐藏其余部分。如果按照错误的思路来，比如使用遮罩层隐藏图片的其他区域然后某一区域不隐藏，你会发现很难实现，因为从css逻辑上好像实现不了这样的操作——例如我只显示图片中某个圆形区域。因为好像并不能实现遮住一部分显示一部分。如果用canvas绘制，那更是麻烦。其实最正确的办法是使用背景图片来实现该功能。
另一点，当图片元素监听鼠标移动事件(mousemove)的时候，会因为放大区域挡在了你的鼠标位置，而无法触发监听事件。如果想错思路例如想通过拦截冒泡事件来处理，会发现处理起来很困难也麻烦。最后发现只要在css加上pointer-events: none;即可解决该问题。
最后一点，就是鼠标移动事件(mousemove)的触发时间有时候有间隙，导致放大元素跟随鼠标移动的时候会不流畅，会有卡顿感。然后发现使用计时器及时更近坐标位置即可解决这个问题。
总之，通过制作这个小功能学习了不少知识。温故而知新还是非常重要的。
以下为实现代码 (可直接运行)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片放大镜</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
.container{
text-align: center;
}
.zoom-wrap{
position: relative;
display: inline-block;
}
.target{
position: relative;
width: 100%;
}
.zoom-area{
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 200px;
height: 200px;
border-radius: 100%;
box-shadow: 0 0 5px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,.3);
background-repeat: no-repeat;
pointer-events: none;
transition: .3s ease-out;
}
</style>
</head>
<body>
<div class="container">
<div class="zoom-wrap">
<!-- 只需修改该处的图片路径即可放大对应图片 -->
<img class="target" src="https://s1.ax1x.com/2021/12/09/oWHiJ1.jpg">
<div class="zoom-area"></div>
</div>
</div>
<script type="text/javascript">
//放大倍数
var scale = 10;
var showZoomArea = false;
//等待放大的图片
var target = document.getElementsByClassName('target')[0];
target.addEventListener('mousemove', zoomImgMouseMove, false);
target.addEventListener('mouseenter', zoomImgMouseEnter, false);
target.addEventListener('mouseleave', zoomImgMouseleave, false);
//放大显示区域
var zoomArea = document.getElementsByClassName('zoom-area')[0];
//设置放大背景图
zoomArea.style.backgroundImage = 'url('+target.getAttribute('src')+')';
//等待图片加载完成
target.onload = function(){
var targetRect = target.getBoundingClientRect();
var targetWidth = targetRect.width;
var targetHeight = targetRect.height;
//设置放大区域样式
zoomArea.style.backgroundSize = (targetWidth * scale)+'px '+(targetHeight * scale)+'px';
}
var zoomRect = zoomArea.getBoundingClientRect();
var widthHalf = zoomRect.width / 2;
var heightHalf = zoomRect.height / 2;
var offsetX = 0;
var offsetY = 0;
console.log(window.innerWidth, window.innerHeight);
function zoomImgMouseMove(e){
offsetX = e.offsetX;
offsetY = e.offsetY;
}
function zoomImgMouseEnter(){
showZoomArea = true;
}
function zoomImgMouseleave(){
showZoomArea = false;
}
setInterval(function(){
zoomArea.style.backgroundPosition = -(offsetX * scale - widthHalf)+'px '+(-(offsetY * scale - heightHalf))+'px';
window.innerWidth, window.innerHeight
//放大镜居中
/*zoomArea.style.left = (offsetX - widthHalf) + 'px';
zoomArea.style.top = (offsetY - heightHalf) + 'px';*/
//放大镜居右下角
if((offsetX + zoomRect.width) > window.innerWidth){
zoomArea.style.left = (offsetX - zoomRect.width) + 'px';
}else{
zoomArea.style.left = offsetX + 'px';
}
if((offsetY + zoomRect.height) > window.innerHeight){
zoomArea.style.top = (offsetY - zoomRect.height) + 'px';
}else{
zoomArea.style.top = offsetY + 'px';
}
setZoomAreaVisi();
}, 100)
function setZoomAreaVisi(){
if(showZoomArea)
zoomArea.style.transform = 'scale(1)';
else
zoomArea.style.transform = 'scale(0)';
}
setZoomAreaVisi();
</script>
</body>
</html>
最终展示效果还是很不错的，以清明上河图为例，里面的人物风景均可看的一清二楚。
清明上河图 - 张择端
效果图
