放大镜效果实现_效果展示

爱国 • 2024-07-07 14:05 • 行业动态 • 阅读 14

放大镜效果通常通过css的transform属性实现，使用scale()函数放大元素。结合hover选择器，可以实现鼠标悬停时放大的效果。可以通过设置zindex确保放大的元素位于最上层。

放大镜效果在网页设计中是一种常见的交互效果，通常用于图片查看、产品展示等场景，实现这个效果需要使用HTML、CSS和JavaScript技术。

（图片来源网络，侵删）

以下是一个基本的放大镜效果的实现步骤：

1、HTML结构：我们需要两个img标签，一个用于显示原始图片，另一个用于显示放大后的图片，我们需要一个div作为放大镜的镜片。

<div class="magnifier">
  <img id="small" src="small.jpg" />
  <img id="big" src="big.jpg" />
  <div id="lens"></div>
</div>

2、CSS样式：设置原始图片和放大后的图片的位置和大小，以及放大镜镜片的大小和初始位置。

#small {
  width: 500px;
  height: 500px;
}
#big {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 800px;
  top: 0;
  visibility: hidden;
}
#lens {
  width: 100px;
  height: 100px;
  background: url(lens.png);
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
}

3、JavaScript代码：当鼠标在原始图片上移动时，获取鼠标的位置，然后计算出放大后的图片应该显示的区域，并移动放大镜镜片到相应的位置。

var small = document.getElementById('small');
var big = document.getElementById('big');
var lens = document.getElementById('lens');
var ratio = big.width / small.width;
small.onmousemove = function(e) {
  var x = e.clientX  small.offsetLeft;
  var y = e.clientY  small.offsetTop;
  var width = lens.offsetWidth;
  var height = lens.offsetHeight;
  var left = x  width / 2;
  var top = y  height / 2;
  var right = left + width;
  var bottom = top + height;
  if (left < 0) {
    left = 0;
    right = width;
  } else if (right > small.width) {
    left = small.width  width;
    right = small.width;
  }
  if (top < 0) {
    top = 0;
    bottom = height;
  } else if (bottom > small.height) {
    top = small.height  height;
    bottom = small.height;
  }
  big.style.display = 'block';
  big.style.left = left * ratio + 'px';
  big.style.top = top * ratio + 'px';
  lens.style.left = left + 'px';
  lens.style.top = top + 'px';
  big.style.width = width * ratio + 'px';
  big.style.height = height * ratio + 'px';
};
small.onmouseleave = function() {
  big.style.display = 'none';
};

代码实现了一个简单的放大镜效果，当鼠标在原始图片上移动时，放大后的图片会跟随鼠标移动，并显示鼠标下的区域。