How to implement image magnifying glass effect with JavaScript?-JS Tutorial-php.cn

How to implement image magnifying glass effect with JavaScript?

WBOY

Release： 2023-10-18 08:45:11

Original

1699 people have browsed it

JavaScript 如何实现图片放大镜效果？

JavaScript How to achieve the picture magnifying glass effect?

In web design, the image magnifying glass effect is often used to display detailed product images. When the mouse is hovering over the image, a magnifying lens can be displayed at the mouse position to enlarge part of the image, thereby providing a clearer display of details. This article will introduce how to use JavaScript to achieve the image magnifying glass effect and provide code examples.

1. HTML structure
First, you need to create a page layout with a magnifying glass. In the HTML file, you need to provide a container for the original image and a container for the magnifying glass. The following HTML structure can be used:

<div class="image-container">
  <img src="原始图片路径" alt="图片描述">
  <div class="zoom-container"></div>
</div>

Copy after login

where image-container is a container containing the original image, and zoom-container is the container for the magnifying glass.

2. CSS Style
In order to achieve the magnifying glass effect, the corresponding CSS style needs to be set. You can use the following CSS example:

.image-container {
  position: relative;
}

.zoom-container {
  position: absolute;
  top: 0;
  left: 100%;
  width: 200px; /* 放大镜的宽度 */
  height: 200px; /* 放大镜的高度 */
  background-color: #fff; /* 放大镜的背景色 */
  border: 1px solid #000; /* 放大镜的边框 */
  opacity: 0; /* 初始状态隐藏放大镜 */
  pointer-events: none; /* 放大镜不接收鼠标事件 */
}

.image-container:hover .zoom-container {
  opacity: 1; /* 鼠标悬停时显示放大镜 */
}

Copy after login

3. JavaScript implementation
Next, use JavaScript to achieve the image magnifying glass effect. The code is as follows:

// 获取相关元素
var imageContainer = document.querySelector('.image-container');
var zoomContainer = document.querySelector('.zoom-container');
var img = imageContainer.querySelector('img');

// 计算放大镜容器的宽度和高度
var zoomContainerWidth = zoomContainer.offsetWidth;
var zoomContainerHeight = zoomContainer.offsetHeight;

// 设置放大镜容器的背景图片为原始图片
zoomContainer.style.backgroundImage = 'url(' + img.src + ')';

// 根据鼠标位置计算放大镜的位置和背景定位
imageContainer.addEventListener('mousemove', function(event) {
  // 获取鼠标在原始图片内的位置
  var mouseX = event.pageX - this.offsetLeft;
  var mouseY = event.pageY - this.offsetTop;

  // 计算放大镜的位置
  var zoomX = mouseX - zoomContainerWidth / 2;
  var zoomY = mouseY - zoomContainerHeight / 2;

  // 限制放大镜的位置不超出原始图片范围
  if (zoomX < 0) {
    zoomX = 0;
  } else if (zoomX > img.offsetWidth - zoomContainerWidth) {
    zoomX = img.offsetWidth - zoomContainerWidth;
  }
  if (zoomY < 0) {
    zoomY = 0;
  } else if (zoomY > img.offsetHeight - zoomContainerHeight) {
    zoomY = img.offsetHeight - zoomContainerHeight;
  }

  // 设置放大镜的位置和背景定位
  zoomContainer.style.left = zoomX + 'px';
  zoomContainer.style.top = zoomY + 'px';
  zoomContainer.style.backgroundPosition = -zoomX + 'px ' + -zoomY + 'px';
});

// 鼠标离开时隐藏放大镜
imageContainer.addEventListener('mouseleave', function() {
  zoomContainer.style.opacity = 0;
});

Copy after login

This article introduces how to use JavaScript to achieve the image magnifying glass effect, and provides the corresponding HTML structure and CSS style, as well as detailed JavaScript code examples. I hope this article can help readers understand and apply the picture magnifying glass effect.

The above is the detailed content of How to implement image magnifying glass effect with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!