js实现放大镜效果的思路与代码

下面我将详细讲解如何通过JavaScript实现放大镜效果。

思路分析

实现放大镜效果的思路相对简单，主要包含以下几个步骤：

1. 通过HTML和CSS创建出整体布局，包括放大镜盒子、原图和放大后的图片等元素。
2. 监听原图的鼠标移动事件，并获取鼠标当前的坐标。
3. 根据鼠标坐标计算出放大镜盒子的位置，并将放大后的图片的位置相应更新。
4. 在移动时，保证鼠标不能超出原图的范围，同时放大后的图片需要保持在放大镜盒子的范围内。

代码示例一

下面我将给出第一个示例代码，实现在一个图片上面移动鼠标时，显示放大后的图片。该代码假设放大后的图片已经存在，代码包含HTML、CSS和JavaScript部分。

HTML代码

<div class="image-container">
  <img src="image.jpg" alt="图片" class="origin-image">
  <div class="magnifier-box"></div>
</div>

CSS代码

.image-container {
  position: relative;
}

.origin-image {
  width: 500px;
  height: 500px;
}

.magnifier-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  opacity: 0.5;
  pointer-events: none;
}

JavaScript代码

const originImg = document.querySelector('.origin-image');
const magnifierBox = document.querySelector('.magnifier-box');

originImg.addEventListener('mousemove', e => {
  // 获取鼠标相对于图片的位置
  const mouseX = e.pageX - originImg.getBoundingClientRect().left;
  const mouseY = e.pageY - originImg.getBoundingClientRect().top;

  // 移动放大镜盒子
  magnifierBox.style.left = `${mouseX - magnifierBox.offsetWidth / 2}px`;
  magnifierBox.style.top = `${mouseY - magnifierBox.offsetHeight / 2}px`;

  // 移动放大后的图片
  const offsetX = -(mouseX * 2 - magnifierBox.offsetWidth) / 2;
  const offsetY = -(mouseY * 2 - magnifierBox.offsetHeight) / 2;
  originImg.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
});

代码示例二

下面我将给出第二个示例代码，实现在一个图集上面移动鼠标时，显示对应的放大后的图片。该代码假设放大后的图片是动态生成的，代码包含HTML、CSS和JavaScript部分。

HTML代码

<div class="image-container">
  <div class="thumbnails">
    <img src="image1-thumb.jpg" alt="图片1" data-img-url="image1.jpg">
    <img src="image2-thumb.jpg" alt="图片2" data-img-url="image2.jpg">
    <img src="image3-thumb.jpg" alt="图片3" data-img-url="image3.jpg">
  </div>
  <div class="origin-image-container">
    <img src="" alt="放大后的图片" class="origin-image">
    <div class="magnifier-box"></div>
  </div>
</div>

CSS代码

.image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumbnails {
  display: flex;
  margin-right: 20px;
}

.thumbnails img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  cursor: pointer;
}

.origin-image-container {
  position: relative;
}

.origin-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.magnifier-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  opacity: 0.5;
  pointer-events: none;
}

JavaScript代码

const thumbnails = document.querySelectorAll('.thumbnails img');
const originImg = document.querySelector('.origin-image');
const magnifierBox = document.querySelector('.magnifier-box');

thumbnails.forEach(thumbnail => {
  thumbnail.addEventListener('mousemove', e => {
    // 获取对应图片的放大后的地址
    const imgUrl = e.target.dataset.imgUrl;

    // 动态生成放大后的图片
    originImg.src = imgUrl;

    // 获取鼠标相对于缩略图的位置
    const mouseX = e.pageX - thumbnail.getBoundingClientRect().left;
    const mouseY = e.pageY - thumbnail.getBoundingClientRect().top;

    // 设置放大镜盒子的位置
    magnifierBox.style.left = `${mouseX - magnifierBox.offsetWidth / 2}px`;
    magnifierBox.style.top = `${mouseY - magnifierBox.offsetHeight / 2}px`;

    // 设置放大后的图片的位置
    const originImgWidth = originImg.offsetWidth;
    const originImgHeight = originImg.offsetHeight;
    const offsetX = -(mouseX * 2 - magnifierBox.offsetWidth) / 2;
    const offsetY = -(mouseY * 2 - magnifierBox.offsetHeight) / 2;
    originImg.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
    originImg.style.maxWidth = `${originImgWidth}px`;
    originImg.style.maxHeight = `${originImgHeight}px`;
    originImg.style.opacity = '1';
  });

  thumbnail.addEventListener('mouseleave', e => {
    // 鼠标离开恢复初始状态
    originImg.style.opacity = '0';
  });
});

总结

以上就是通过JavaScript实现放大镜效果的完整攻略。希望能对你有所帮助！