1. Python技术站首页
  2. css

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

• css

实现放大镜特效可以为网站或应用程序增加一些交互性和视觉吸引力。下面是一个完整攻略，包含了如何使用原生 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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • CSS Sprite从大图中截取小图完整教程

    CSS Sprite从大图中截取小图完整教程 什么是CSS Sprite CSS Sprite是指将网页中的多个小图标或小图片拼接在同一张大图上，通过CSS background-position来进行定位，从而减小网页的请求次数，加快网页的加载速度。 如何实现CSS Sprite 实现CSS Sprite一般分为以下步骤： 将多个小图片合并成一张大图片，并…

    css 2023年6月10日
    00

  • React useCallback钩子的作用方法demo

    React的useCallback钩子是一个用于优化性能的Hooks。其作用是缓存一个函数引用，以便可以在渲染周期之间复用该函数。 使用方法 useCallback接受两个参数: 一个需要缓存的函数 一个依赖项数组 当依赖项改变时，useCallback返回的缓存函数才会被重新计算。 示范1：使用useCallback优化子组件的渲染 在下面的示例中，我们将…

    css 2023年6月10日
    00

  • HTML中文件上传时使用的元素的样式自定义

    自定义文件上传控件样式是一个常见的需求，而HTML中的元素则是实现文件上传的一种常用方式。但是，由于该元素的原始样式与不同浏览器间的表现存在差异，因此需要对其样式进行自定义以满足实际需求。 以下是自定义元素样式的完整攻略： 隐藏原始控件，添加自定义的按钮 为了隐藏原始的文件上传控件，可以将其样式设置为display: none或者opacity: 0，并用一…

    css 2023年6月10日
    00

  • CSS伪类/伪元素选择器整理

    对于“CSS伪类/伪元素选择器整理”的完整攻略，我会详细讲解以下内容： 一、什么是CSS伪类/伪元素？ 在CSS中，伪类和伪元素是两种不同的选择器类型，它们可以在某些特定情况下用来选择HTML中的元素，并应用相应的CSS样式。以下是它们的定义： 伪类：表示一些HTML元素的特定状态，例如:hover（鼠标悬停状态）、:active（执行点击操作时的状态）等。…

    css 2023年6月10日
    00

  • 详解CSS Sprite雪碧图的应用

    详解CSS Sprite雪碧图的应用 什么是CSS Sprite雪碧图 CSS Sprite雪碧图指的是将多个小图片合并成一张大图片，并通过CSS的background-image和background-position来控制显示不同的小图片，从而减少了网站的http请求次数。这种技术在Web前端性能优化中被广泛应用。 CSS Sprite雪碧图的制作 CS…

    css 2023年6月9日
    00

  • JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码

    下面是详细讲解“JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码”的完整攻略。 思路 可以通过利用JavaScript判断屏幕分辨率的方式，来判断当前设备所使用的设备像素比（DevicePixelRatio）以及分辨率，从而动态加载不同分辨率下的CSS样式文件。具体实现流程如下： 首先，在HTML文档头部中要引入多个CSS样式表，每个样式表都对应…

    css 2023年6月9日
    00

  • HTML基础必看——全面了解css样式表

    当我们在编写HTML文档时，其中一个关键部分是添加CSS样式表。CSS（Cascading Style Sheets）是一种样式表语言，它描述了HTML文档中每个元素的外观和布局。在这篇文章中，我将介绍CSS样式表的基础知识，包括样式表的语法，如何添加样式表，如何使用CSS选择器，以及如何在HTML文档中应用CSS样式。 语法 CSS的语法是基于选择器和属性…

    css 2023年6月9日
    00

  • 网页设计师学习网页设计的经验和技巧小结

    下面我来详细讲解“网页设计师学习网页设计的经验和技巧小结”的完整攻略。 1. 掌握基本技能 在学习网页设计时，首先要掌握基本的技能，包括HTML、CSS、JavaScript等基础知识。只有掌握了这些基础技能，才能进行更高级的网页设计学习和创作。 2. 学习设计原则 网页设计不仅要注重技术方面的实现，还要注重美感与用户体验。学习设计原则可以帮助你更好地理解设…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部