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选择器中的正则表达式使用

    在CSS选择器中使用正则表达式可以更加灵活地选择元素，以下是关于CSS选择器中正则表达式使用的完整攻略，包括两个示例说明： 1. 正则表达式基础 正则表达式是一种用于匹配文本的模式。在CSS选择器中，可以使用正则表达式来匹配元素的属性值。以下是一些常用的正则表达式符号： ^：匹配以指定字符开头的字符串。 $：匹配以指定字符结尾的字符串。 *：匹配前面的字符零…

    css 2023年5月18日
    00

  • Dreamever如何嵌入css样式?html嵌入css方法介绍

    Dreamweaver 是一款常用的网页制作工具，可以通过它来嵌入 CSS 样式表。以下是关于“Dreamweaver 如何嵌入 CSS 样式？HTML 嵌入 CSS 方法介绍”的完整攻略。 步骤一：创建 HTML 文件 首先，需要在 Dreamweaver 中创建一个 HTML 文件。可以通过以下步骤操作： 打开 Dreamweaver 软件。 点击“文件…

    css 2023年5月18日
    00

  • 浅析js实现网页截图的两种方式

    浅析js实现网页截图的两种方式 在网页开发过程中，有时需要实现对网页进行截图的功能。本文将详细介绍js实现网页截图的两种方式，供大家参考。 方式一：html2canvas html2canvas是一个开源的js库，可以将整个网页转化成canvas元素。使用它，我们可以将网页的部分或全部内容保存下来，以实现网页截图的效果。 安装和使用： 使用npm安装 npm…

    css 2023年6月10日
    00

  • js实现的Easy Tabs选项卡用法实例

    下面是详细的js实现选项卡的攻略，包含了具体的实现过程、代码示例和注意事项。 js实现的Easy Tabs选项卡用法实例 简介 选项卡是一种经典的交互式UI组件，主要用于在有限的屏幕空间内展示多个内容区块。js实现的Easy Tabs选项卡就是其中的一种，比起使用CSS实现，使用js实现可以更加灵活，可定制性更强。 基本原理 js实现的选项卡主要原理是，通过…

    css 2023年6月11日
    00

  • css3实现wifi信号逐渐增强效果实例

    下面我将为大家详细讲解“CSS3实现WiFi信号逐渐增强效果实例”的完整攻略。 首先，我们要了解到本次实例的主要思路，即利用CSS3的动画效果，实现WiFi信号逐渐增强的动态效果。接下来，我们可以根据以下步骤来实现这个效果。 1. 编写HTML结构 首先，我们需要先编写基础的HTML结构。这里我们假设WiFi信号区域是一个div容器，内部还包含三个div元素…

    css 2023年6月10日
    00

  • ExtJs使用总结(非常详细)

    下面我将详细讲解“ExtJs使用总结(非常详细)”的完整攻略。 一、初识ExtJs 介绍了ExtJs是什么，包括MVVM架构、组件化、丰富的UI组件等 强调了ExtJs的学习曲线很陡峭，需要花费大量的时间学习 二、ExtJs组件基础 介绍了ExtJs的组件基础知识，包括容器组件、表单组件、布局等 通过示例代码演示了如何创建容器组件和表单组件 示例一：创建容器…

    css 2023年6月10日
    00

  • JS弹出层的显示与隐藏示例代码

    JS弹出层是Web开发中非常常见的一个功能。下面，我们来详细讲解如何实现JS弹出层的显示与隐藏。 1. HTML结构 首先，我们需要进行HTML结构的搭建。以下是一个最基础的HTML结构： <!–触发弹出层的按钮–> <button id="showBtn">显示弹出层</button> <!…

    css 2023年6月11日
    00

  • css清除默认样式和设置公共样式的方法

    现在让我详细讲解“CSS清除默认样式和设置公共样式的方法”的完整攻略。 清除默认样式 在编写CSS样式时，我们不得不面对浏览器默认样式对我们样式的影响。下面是清除默认样式的一些方法。 1. 使用通配符 使用通配符可以移除某个HTML元素的所有样式，例如： * { margin: 0; padding: 0; } 这个样式会将所有HTML元素的margin和p…

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