css实现放大镜

CSS实现放大镜效果是一项非常实用而又极具观赏性的技术，其实现过程其实比较简单。

css实现放大镜

首先，我们需要在HTML中添加需要放大的图片以及两个容器，一个用于展示原图，一个用于展示放大后的图:

  <div class="origin-container">
    <img src="./images/origin.jpg" alt="origin" class="origin-img">
  </div>

  <div class="magnify-container">
    <div class="magnify-img"></div>
  </div>

接着，在CSS中对这三个元素进行样式设置：

  .origin-container {
    position: relative;
  }

  .origin-img {
    display: block;
    width: 400px;
    height: 600px;
  }

  .magnify-container {
    position: absolute;
    top: 0;
    right: -400px;  /* 使其在图片右边 */
    width: 200px;
    height: 200px;
    overflow: hidden;  /* 隐藏溢出的部分 */
  }

  .magnify-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;  /* 放大后的宽高为原图的两倍 */
    height: 1200px;
    background-image: url(./images/origin.jpg);
    background-repeat: no-repeat;
    background-size: 400px 600px;  /* 告诉浏览器如何把原图放大至对应倍数 */
    opacity: 0;  /* 最初不可见 */
    transition: all 0.3s ease-out;  /* 添加过渡效果 */
  }

接着，我们需要用JS为原图添加鼠标事件，以实现鼠标移动时放大效果的触发：

  const originContainer = document.querySelector('.origin-container')
  const magnifyImg = document.querySelector('.magnify-img')

  originContainer.addEventListener('mousemove',(e) => {
    const x = e.offsetX
    const y = e.offsetY
    magnifyImg.style.opacity = 1;
    magnifyImg.style.backgroundPositionX = -x * 2 + 'px';  /* 计算平移距离 */
    magnifyImg.style.backgroundPositionY = -y * 2 + 'px';
  })

  originContainer.addEventListener('mouseleave',() => {
    magnifyImg.style.opacity = 0;
  })

通过这样的代码实现，我们就能够实现一个简单而又美观的CSS放大镜效果了！

相关推荐