HTML+CSS+JavaScript实现放大镜效果

2023年5月28日上午10:45 • JavaScript

实现放大镜效果通常需要使用HTML、CSS和JavaScript三种技术进行联合开发。下面将详细讲解HTML+CSS+JavaScript实现放大镜效果的完整攻略，具体分为以下几个步骤：

第一步：准备工作

在开发过程中，我们需要准备一些素材，包括原始图片、处理后的图片，以及用于展示的页面等。

第二步：HTML编写

在编写HTML代码时，我们需要将放大镜效果展示的区域放置于HTML页面中，例如可以使用以下代码：

<body>
  <div id="main">
    <img id="image" src="image/1.jpg" />
    <div id="glass"></div>
  </div>
</body>

其中，<img> 标签用于展示原始图片，<div> 标签则用于展示放大效果。

第三步：CSS编写

接下来，我们需要使用CSS设置图片和放大效果的样式。我们需要将原始图片设置为可放大的区域，而放大效果的部分则需要设置为透明的 div 容器。具体的代码如下：

#main {
  position: relative;
  width: 500px;
  height: 330px;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#glass {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 2;
  display: none;
}

在这段 CSS 代码中，#main 表示整体容器，#image 表示原始图片，#glass 表示放大效果的容器。其中，position 属性用于设置元素定位方式，left 和 top 属性用于设置元素的偏移量，z-index 属性用于设置元素的堆叠顺序，display 属性用于控制元素的显示或隐藏。

第四步：JavaScript编写

最后，我们需要使用 JavaScript 实现放大镜效果。我们需要监听原始图片的鼠标移动事件，并通过计算移动距离来实现放大效果。具体的代码如下：

var img = document.getElementById('image');
var glass = document.getElementById('glass');
var main = document.getElementById('main');

main.addEventListener('mousemove', function(e) {
  var x = e.clientX - this.offsetLeft - glass.offsetWidth / 2;
  var y = e.clientY - this.offsetTop - glass.offsetHeight / 2;
  var maxX = img.offsetWidth - glass.offsetWidth;
  var maxY = img.offsetHeight - glass.offsetHeight;

  if (x < 0) {
    x = 0;
  } else if (x > maxX) {
    x = maxX;
  }

  if (y < 0) {
    y = 0;
  } else if (y > maxY) {
    y = maxY;
  }

  glass.style.left = x + 'px';
  glass.style.top = y + 'px';
  glass.style.backgroundPosition = -x * 2 + 'px ' + -y * 2 + 'px';
});

main.addEventListener('mouseenter', function(e) {
  glass.style.display = 'block';
});

main.addEventListener('mouseleave', function(e) {
  glass.style.display = 'none';
});

在这段 JavaScript 代码中，addEventListener() 方法用于监听事件，clientX 和 clientY 属性用于获取鼠标相对于视口的位置。通过计算偏移量和边界值，然后设置放大效果的位置和背景图的偏移量即可实现放大镜效果。