前端商品主图放大功能 html+css+JavaScript

叫声金鱼哥啦

于 2023-06-07 17:11:19 发布

阅读量344

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_71207793/article/details/131091999

版权

当涉及到前端的商品主图放大镜功能时，你可以使用HTML、CSS和JavaScript来实现。下面是一个简单的示例代码，展示了如何创建一个基本的商品主图放大镜效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 400px;
    }
    
    .image {
      width: 100%;
      max-width: 400px;
      height: auto;
    }
    
    .zoom {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <img class="image" src="product-image.jpg" alt="Product Image">
    <div class="zoom"></div>
  </div>

  <script>
    const container = document.querySelector('.container');
    const image = document.querySelector('.image');
    const zoom = document.querySelector('.zoom');
    const zoomFactor = 2; // 放大倍数

    container.addEventListener('mousemove', function(event) {
      const containerRect = container.getBoundingClientRect();
      const x = event.clientX - containerRect.left;
      const y = event.clientY - containerRect.top;
      
      const imageWidth = image.offsetWidth;
      const imageHeight = image.offsetHeight;
      const zoomWidth = zoom.offsetWidth;
      const zoomHeight = zoom.offsetHeight;
      
      const posX = x - zoomWidth / 2;
      const posY = y - zoomHeight / 2;
      
      const zoomMaxX = imageWidth - zoomWidth;
      const zoomMaxY = imageHeight - zoomHeight;
      
      const zoomX = Math.min(Math.max(0, posX), zoomMaxX);
      const zoomY = Math.min(Math.max(0, posY), zoomMaxY);
      
      const ratioX = zoomMaxX / (imageWidth * zoomFactor);
      const ratioY = zoomMaxY / (imageHeight * zoomFactor);
      
      zoom.style.backgroundImage = `url(${image.src})`;
      zoom.style.backgroundPosition = `-${zoomX / ratioX}px -${zoomY / ratioY}px`;
      zoom.style.display = 'block';
    });
    
    container.addEventListener('mouseleave', function() {
      zoom.style.display = 'none';
    });
  </script>
</body>
</html>

这段代码实现了一个简单的商品主图放大镜功能。当鼠标在容器内移动时，会在放大镜框中显示相应位置的放大图像。要使用此代码，将产品图像的路径替换为<img>标签中的src属性。你还可以根据需要自定义样式，例如调整容器和放大镜的大小、颜色等。

请注意，这只是一个基本的示例代码，你可以根据项目的需求进行定制和扩展。如果你希望添加其他功能，例如拖动放大镜或使用CSS过渡效果，你可以进一步修改JavaScript和CSS部分。

叫声金鱼哥啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端商品主图放大功能 html+css+JavaScript

请注意，这只是一个基本的示例代码，你可以根据项目的需求进行定制和扩展。如果你希望添加其他功能，例如拖动放大镜或使用CSS过渡效果，你可以进一步修改JavaScript和CSS部分。这段代码实现了一个简单的商品主图放大镜功能。当鼠标在容器内移动时，会在放大镜框中显示相应位置的放大图像。要使用此代码，将产品图像的路径替换为。你还可以根据需要自定义样式，例如调整容器和放大镜的大小、颜色等。当涉及到前端的商品主图放大镜功能时，你可以使用。
复制链接

扫一扫