使用原生js实现图片放大器效果

今天在练习一个vue电商项目是，遇到一个图片放大区觉得很难理解，于是就动手使用原生js做了一个。

HTML，JS部分代码

    <div class="zoomContainer">
      <!-- 图片最上方的蒙板，用来给放大区域做定位 -->
      <div class="panel"></div>
      <!-- 显示正常大小图片的地方 -->
      <div class="imageArea"><img src="./an.jpg" /></div>
      <!-- 要放大的区域 -->
      <div class="zoomArea"></div>
      <!-- 显示放大图片的地方 -->
      <div class="bigImageArea"><img src="./an.jpg" class="bigImage" /></div>
    </div>



//获取dom节点
const panel = document.querySelector(".panel");
const zoomArea = document.querySelector(".zoomArea");
const bigImageArea = document.querySelector(".bigImageArea");
const bigImage = document.querySelector(".bigImage");

panel.onmousemove = function (event) {
  //鼠标进入展示需要放大的区域和放大后的图片
  zoomArea.style.display = "block";
  bigImageArea.style.display = "block";

  //获取展示区域的坐标
  let imageX = event.offsetX;
  let imageY = event.offsetY;

  //计算出展示区的偏移量
  let left = imageX - zoomArea.offsetWidth / 2;
  let top = imageY - zoomArea.offsetHeight / 2;
  //判断，如果超出图片范围进行设置
  if (left >= zoomArea.offsetWidth) {
    left = zoomArea.offsetWidth;
  }
  if (left <= 0) {
    left = 0;
  }
  if (top >= zoomArea.offsetHeight) {
    top = zoomArea.offsetHeight;
  }
  if (top <= 0) {
    top = 0;
  }
  //修改偏移量
  zoomArea.style.left = left + "px";
  zoomArea.style.top = top + "px";
  bigImage.style.left = -2 * left + "px";
  bigImage.style.top = -2 * top + "px";
};
//当鼠标离开隐藏展示区
panel.onmouseleave = function () {
  zoomArea.style.display = "none";
  bigImageArea.style.display = "none";
};

效果展示

开发中的问题及解决方法

1.获取要放大的区域出现卡顿

需要放大的部分为图片大小的四分之一，鼠标在图片上移动时显示放大要放大的区域以及左侧放大后的图片，如果直接给图片绑定onmousemove事件，那么鼠标移动时绿色的放大区域会出现在图片上方并跟随鼠标移动，此时给图片绑定的onmousemove事件就监听不到了，而且还出现卡顿。

解决办法

在图片的上方加一层蒙版，并设置z-index的css属性使其漂浮在图片区域的最上方，然后给蒙版绑定鼠标事件获取坐标，因为蒙版是在最上方的，所以绿色框出现不会影响蒙版的onmousemove事件。

2.获取图片宽高失败

因为绿色框的left，top属性的计算需要用到元素的宽高属性，通过dom.style.width/height发现获取不到dom的宽高。后查阅资料得知只有写在行内的css样式才能使用这种方法获取到。

解决办法

使用window.getComputedStyle(dom元素,‘伪类’).属性名，或者dom的offsetWidth、offsetHeight来获取。

完整代码

完整代码链接：https://github.com/liuyasai/imageZoom