JavaScript鼠标放大镜特效
鼠标移动放大图片的特效，在电商图文详情页、画廊、产品展示里常见。用纯 JavaScript 来实现，其实也不复杂，代码也挺直观的，响应也快。你只需要一个 ;</> 元素，再配上一段事件监听逻辑，就能实现比较自然的放大镜效果。</>
<>>id="zoom-image"> 就行。CSS 负责定义初始样式，比如
width 和 position，加点交互提示就更友好了，比如鼠标悬停时显示 cursor: zoom-in。
接下来是重点：用 mousemove 监听器来追踪鼠标位置，动态生成一个放大的图片元素，定位到鼠标周围，还原度也不错。核心逻辑主要靠 cloneNode 和 transform: scale() 搞定，写起来没多复杂。
你也可以再优化下，比如加点过渡动画、限制边界、防止图片抖动。还可以考虑改用 transform 缩放 来提升性能，毕竟频繁改图片尺寸性能开销不小。用 transform 能更省资源，还不会频繁触发重排。
如果你用 jQuery、Vue、React 做项目，也可以把这段逻辑封装成一个组件，用起来更灵活。嗯，项目里要做图片细节展示的场景，用这个效果确实蛮合适。
文件大小：1.39MB
评论区