原生js简单实现放大镜特效

实现放大镜特效可以为网站或应用程序增加一些交互性和视觉吸引力。下面是一个完整攻略，包含了如何使用原生 JavaScript 实现放大镜特效的过程和两个示例说明。

实现放大镜特效

步骤一：HTML 结构

首先，我们需要创建一个 HTML 结构来容纳放大镜和原始图像。下面是一个示例：

<div class="container">
  <div class="image">
    <img src="image.jpg" alt="原始图像">
    <div class="magnifier"></div>
  </div>
</div>

上述代码中，我们创建了一个包含原始图像和放大镜的容器。原始图像使用 img 元素加载，放大镜使用 div 元素创建。

步骤二：CSS 样式

接下来，我们需要使用 CSS 样式来布局和样式化放大镜和原始图像。下面是一个示例：

.container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 50px auto;
}

.image {
  position: relative;
  width: 100%;
  height: 100%;
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.magnifier {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: none;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  visibility: hidden;
}

上述代码中，我们将 .container 元素的 position 属性设置为 relative，以使其成为相对定位元素。我们将 .image 元素的 position 属性设置为 relative，以使其成为相对定位元素。我们使用 object-fit 属性设置原始图像的填充方式。我们将 .magnifier 元素的 position 属性设置为 absolute，以使其成为绝对定位元素。我们将 .magnifier 元素的 width 和 height 属性设置为 200px，以使其成为圆形。我们使用 border 属性设置放大镜的边框。我们使用 border-radius 属性将放大镜变成圆形。我们使用 cursor 属性将鼠标指针设置为无形，以使其不影响用户体验。我们使用 pointer-events 属性将鼠标事件禁用，以使其不影响用户体验。我们使用 background-repeat 和 background-size 属性设置放大镜的背景图像。我们使用 visibility 属性将放大镜设置为不可见。

步骤三：JavaScript 代码

最后，我们需要使用 JavaScript 代码来实现放大镜特效。下面是一个示例：

var container = document.querySelector('.container');
var image = document.querySelector('.image');
var magnifier = document.querySelector('.magnifier');
var magnifierWidth = magnifier.offsetWidth;
var magnifierHeight = magnifier.offsetHeight;
var imageWidth = image.offsetWidth;
var imageHeight = image.offsetHeight;
var ratioX = imageWidth / magnifierWidth;
var ratioY = imageHeight / magnifierHeight;

image.addEventListener('mousemove', function(e) {
  var mouseX = e.pageX - container.offsetLeft;
  var mouseY = e.pageY - container.offsetTop;
  var posX = mouseX - magnifierWidth / 2;
  var posY = mouseY - magnifierHeight / 2;

  if (posX < 0) {
    posX = 0;
  }

  if (posY < 0) {
    posY = 0;
  }

  if (posX + magnifierWidth > imageWidth) {
    posX = imageWidth - magnifierWidth;
  }

  if (posY + magnifierHeight > imageHeight) {
    posY = imageHeight - magnifierHeight;
  }

  magnifier.style.left = posX + 'px';
  magnifier.style.top = posY + 'px';
  magnifier.style.backgroundImage = 'url(' + image.querySelector('img').src + ')';
  magnifier.style.backgroundPositionX = -posX * ratioX + 'px';
  magnifier.style.backgroundPositionY = -posY * ratioY + 'px';
});

image.addEventListener('mouseenter', function() {
  magnifier.style.visibility = 'visible';
});

image.addEventListener('mouseleave', function() {
  magnifier.style.visibility = 'hidden';
});

上述代码中，我们首先获取 .container 元素、.image 元素和 .magnifier 元素。我们使用 offsetWidth 和 offsetHeight 属性获取放大镜和原始图像的宽度和高度。我们使用 image.querySelector('img').src 获取原始图像的 URL。我们使用 ratioX 和 ratioY 变量计算放大镜和原始图像的比例。

我们使用 mousemove 事件监听器来监听鼠标移动事件。每次鼠标移动时，我们计算鼠标在 .container 元素中的位置，并将其减去 .magnifier 元素宽度和高度的一半，以使放大镜的中心与鼠标对齐。我们使用 if 语句确保放大镜不会超出原始图像的边界。我们使用 style 属性设置放大镜的位置和背景图像。我们使用 backgroundPositionX 和 backgroundPositionY 属性设置背景图像的位置。

我们使用 mouseenter 事件监听器来监听鼠标进入事件。每次鼠标进入时，我们将 .magnifier 元素的 visibility 属性设置为 visible，以使其可见。

我们使用 mouseleave 事件监听器来监听鼠标离开事件。每次鼠标离开时，我们将 .magnifier 元素的 visibility 属性设置为 hidden，以使其不可见。

示例

下面是两个示例，演示如何使用原生 JavaScript 实现放大镜特效。

示例一：放大镜特效

<div class="container">
  <div class="image">
    <img src="image.jpg" alt="原始图像">
    <div class="magnifier"></div>
  </div>
</div>

.container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 50px auto;
}

.image {
  position: relative;
  width: 100%;
  height: 100%;
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.magnifier {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: none;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  visibility: hidden;
}

var container = document.querySelector('.container');
var image = document.querySelector('.image');
var magnifier = document.querySelector('.magnifier');
var magnifierWidth = magnifier.offsetWidth;
var magnifierHeight = magnifier.offsetHeight;
var imageWidth = image.offsetWidth;
var imageHeight = image.offsetHeight;
var ratioX = imageWidth / magnifierWidth;
var ratioY = imageHeight / magnifierHeight;

image.addEventListener('mousemove', function(e) {
  var mouseX = e.pageX - container.offsetLeft;
  var mouseY = e.pageY - container.offsetTop;
  var posX = mouseX - magnifierWidth / 2;
  var posY = mouseY - magnifierHeight / 2;

  if (posX < 0) {
    posX = 0;
  }

  if (posY < 0) {
    posY = 0;
  }

  if (posX + magnifierWidth > imageWidth) {
    posX = imageWidth - magnifierWidth;
  }

  if (posY + magnifierHeight > imageHeight) {
    posY = imageHeight - magnifierHeight;
  }

  magnifier.style.left = posX + 'px';
  magnifier.style.top = posY + 'px';
  magnifier.style.backgroundImage = 'url(' + image.querySelector('img').src + ')';
  magnifier.style.backgroundPositionX = -posX * ratioX + 'px';
  magnifier.style.backgroundPositionY = -posY * ratioY + 'px';
});

image.addEventListener('mouseenter', function() {
  magnifier.style.visibility = 'visible';
});

image.addEventListener('mouseleave', function() {
  magnifier.style.visibility = 'hidden';
});

上述代码中，我们创建了一个包含原始图像和放大镜的容器。原始图像使用 img 元素加载，放大镜使用 div 元素创建。我们使用 JavaScript 代码实现了放大镜特效。

示例二：放大镜特效并添加缩略图

<div class="container">
  <div class="image">
    <img src="image.jpg" alt="原始图像">
    <div class="magnifier"></div>
  </div>
  <div class="thumbnails">
    <img src="thumbnail1.jpg" alt="缩略图1">
    <img src="thumbnail2.jpg" alt="缩略图2">
    <img src="thumbnail3.jpg" alt="缩略图3">
  </div>
</div>

.container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 50px auto;
}

.image {
  position: relative;
  width: 100%;
  height: 100%;
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.magnifier {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: none;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  visibility: hidden;
}

.thumbnails {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.thumbnails img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.thumbnails img:hover {
  transform: scale(1.2);
}

var container = document.querySelector('.container');
var image = document.querySelector('.image');
var magnifier = document.querySelector('.magnifier');
var magnifierWidth = magnifier.offsetWidth;
var magnifierHeight = magnifier.offsetHeight;
var imageWidth = image.offsetWidth;
var imageHeight = image.offsetHeight;
var ratioX = imageWidth / magnifierWidth;
var ratioY = imageHeight / magnifierHeight;
var thumbnails = document.querySelectorAll('.thumbnails img');

for (var i = 0; i < thumbnails.length; i++) {
  var thumbnail = thumbnails[i];
  thumbnail.addEventListener('click', function() {
    var src = this.src.replace('thumbnail', 'image');
    image.querySelector('img').src = src;
  });
}

image.addEventListener('mousemove', function(e) {
  var mouseX = e.pageX - container.offsetLeft;
  var mouseY = e.pageY - container.offsetTop;
  var posX = mouseX - magnifierWidth / 2;
  var posY = mouseY - magnifierHeight / 2;

  if (posX < 0) {
    posX = 0;
  }

  if (posY < 0) {
    posY = 0;
  }

  if (posX + magnifierWidth > imageWidth) {
    posX = imageWidth - magnifierWidth;
  }

  if (posY + magnifierHeight > imageHeight) {
    posY = imageHeight - magnifierHeight;
  }

  magnifier.style.left = posX + 'px';
  magnifier.style.top = posY + 'px';
  magnifier.style.backgroundImage = 'url(' + image.querySelector('img').src + ')';
  magnifier.style.backgroundPositionX = -posX * ratioX + 'px';
  magnifier.style.backgroundPositionY = -posY * ratioY + 'px';
});

image.addEventListener('mouseenter', function() {
  magnifier.style.visibility = 'visible';
});

image.addEventListener('mouseleave', function() {
  magnifier.style.visibility = 'hidden';
});

上述代码中，我们创建了一个包含原始图像、放大镜和缩略图的容器。我们使用 JavaScript 代码为每个缩略图添加了一个点击事件监听器，以便在单击缩略图时更改原始图像。我们使用 CSS 样式为缩略图添加了一些样式，以使其更具交互性。我们使用 JavaScript 代码实现了放大镜特效。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js简单实现放大镜特效 - Python技术站