原生js实现一个放大镜效果超详细

下面我将详细讲解“原生js实现一个放大镜效果超详细”的完整攻略,包括具体步骤和示例说明。

1. 确定实现功能

首先要明确要实现的功能,即在鼠标移动到图片区域的某个位置时,显示该位置的放大图像,这里需要实现以下功能:

  • 鼠标移动到图片区域时,获取鼠标位置,并计算放大图像的位置
  • 显示放大图像,并确定其位置和大小
  • 鼠标移出图片区域时,隐藏放大图像

2. HTML和CSS布局

创建一个HTML元素作为放大镜,用CSS设置其样式和位置,然后把图片作为背景图设置在另一个HTML元素上。

<div id="img-container">
  <div id="zoom"></div>
  <div id="img" style="background-image: url(img.jpg)"></div>
</div>

#img-container {
  position: relative;
  width: 500px;
  height: 500px;
}

#img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#zoom {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid #eee;
  display: none;
  /* 隐藏放大镜 */
  background-color: rgba(0, 0, 0, 0.2);
  /* 设置放大镜背景色,透明度为0.2 */
  background-repeat: no-repeat;
}

3. JS实现放大效果

3.1 获取鼠标位置

监听图片容器的mousemove事件,获取鼠标相对于容器左上角的坐标位置。由于鼠标位置相对于屏幕而言,需要计算鼠标位置与容器位置的偏移量,并将其作为参数传入放大镜的位置计算函数。

const imgContainer = document.getElementById("img-container");
const zoom = document.getElementById("zoom");
const img = document.getElementById("img");

imgContainer.addEventListener("mousemove", e => {
  const x = e.pageX - imgContainer.offsetLeft;
  const y = e.pageY - imgContainer.offsetTop;

  setZoomPosition(x, y);
});

3.2 计算放大图像位置

根据鼠标位置计算放大镜的位置,然后通过对放大效果的大小进行调整,动态设置放大环境中展示的文件位置(计算公式可以根据实际情况进行调整)。

function setZoomPosition(x, y) {
  const zoomWidth = zoom.offsetWidth;
  const zoomHeight = zoom.offsetHeight;
  const imgWidth = img.offsetWidth;
  const imgHeight = img.offsetHeight;
  const bgWidth =
    parseInt(getComputedStyle(img).backgroundSize.split(" ")[0]) || imgWidth;
  const bgHeight =
    parseInt(getComputedStyle(img).backgroundSize.split(" ")[1]) || imgHeight;

  const ratioX = zoomWidth / imgWidth;
  const ratioY = zoomHeight / imgHeight;

  const bgX = (x / imgWidth) * bgWidth - zoomWidth / 2;
  const bgY = (y / imgHeight) * bgHeight - zoomHeight / 2;

  const offsetX = x - zoomWidth / 2;
  const offsetY = y - zoomHeight / 2;

  if (bgX < 0) {
    zoom.style.backgroundPositionX = "0";
  } else if (bgX > bgWidth - zoomWidth / ratioX) {
    zoom.style.backgroundPositionX = bgWidth - zoomWidth / ratioX + "px";
  } else {
    zoom.style.backgroundPositionX = bgX + "px";
  }

  if (bgY < 0) {
    zoom.style.backgroundPositionY = "0";
  } else if (bgY > bgHeight - zoomHeight / ratioY) {
    zoom.style.backgroundPositionY = bgHeight - zoomHeight / ratioY + "px";
  } else {
    zoom.style.backgroundPositionY = bgY + "px";
  }

  zoom.style.left = offsetX + "px";
  zoom.style.top = offsetY + "px";

  zoom.style.display = "block";
  // 显示放大镜
}

3.3 隐藏放大图像

监听图片容器的mouseleave事件,隐藏放大镜。

imgContainer.addEventListener("mouseleave", () => {
  zoom.style.display = "none";
});

4. 示例说明

示例1

此示例演示了使用原生JS实现放大效果的基本步骤。 具体实现步骤如下:

  1. 创建HTML和CSS元素及样式
  2. 在JS中获取元素并监听mousemove和mouseleave事件
  3. 编写计算放大效果位置的函数
  4. 显示和隐藏放大效果
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JS放大镜效果示例1</title>
    <style>
      #img-container {
        position: relative;
        width: 500px;
        height: 500px;
      }

      #img {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      #zoom {
        position: absolute;
        width: 150px;
        height: 150px;
        border: 2px solid #eee;
        display: none;
        /* 隐藏放大镜 */
        background-color: rgba(0, 0, 0, 0.2);
        /* 设置放大镜背景色,透明度为0.2 */
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div id="img-container">
      <div id="zoom"></div>
      <div id="img" style="background-image: url(img1.jpg)"></div>
    </div>

    <script>
      const imgContainer = document.getElementById("img-container");
      const zoom = document.getElementById("zoom");
      const img = document.getElementById("img");

      imgContainer.addEventListener("mousemove", e => {
        const x = e.pageX - imgContainer.offsetLeft;
        const y = e.pageY - imgContainer.offsetTop;

        setZoomPosition(x, y);
      });

      imgContainer.addEventListener("mouseleave", () => {
        zoom.style.display = "none";
      });

      function setZoomPosition(x, y) {
        const zoomWidth = zoom.offsetWidth;
        const zoomHeight = zoom.offsetHeight;
        const imgWidth = img.offsetWidth;
        const imgHeight = img.offsetHeight;
        const bgWidth = parseInt(
          getComputedStyle(img).backgroundSize.split(" ")[0]
        );
        const bgHeight = parseInt(
          getComputedStyle(img).backgroundSize.split(" ")[1]
        );

        const ratioX = zoomWidth / imgWidth;
        const ratioY = zoomHeight / imgHeight;

        const bgX = (x / imgWidth) * bgWidth - zoomWidth / 2;
        const bgY = (y / imgHeight) * bgHeight - zoomHeight / 2;

        const offsetX = x - zoomWidth / 2;
        const offsetY = y - zoomHeight / 2;

        if (bgX < 0) {
          zoom.style.backgroundPositionX = "0";
        } else if (bgX > bgWidth - zoomWidth / ratioX) {
          zoom.style.backgroundPositionX =
            bgWidth - zoomWidth / ratioX + "px";
        } else {
          zoom.style.backgroundPositionX = bgX + "px";
        }

        if (bgY < 0) {
          zoom.style.backgroundPositionY = "0";
        } else if (bgY > bgHeight - zoomHeight / ratioY) {
          zoom.style.backgroundPositionY =
            bgHeight - zoomHeight / ratioY + "px";
        } else {
          zoom.style.backgroundPositionY = bgY + "px";
        }

        zoom.style.left = offsetX + "px";
        zoom.style.top = offsetY + "px";

        zoom.style.display = "block";
        // 显示放大镜
      }
    </script>
  </body>
</html>

示例2

此示例演示了使用原生JS实现放大效果的优化,使其更加流畅、实用。具体实现步骤如下:

  1. 创建HTML元素和CSS样式,将放大效果显示在边框内部,增加放大效果为视觉中心,优化用户体验
  2. 在JS中对计算公式进行优化,使放大效果更加精准,完美呈现
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JS放大镜效果示例2</title>
    <style>
      #img-container {
        position: relative;
        width: 500px;
        height: 500px;
      }

      #img {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      #zoom {
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px dashed #999;
        display: none;
        /* 隐藏放大镜 */
        background-color: rgba(255, 255, 255, 0.5);
        /* 设置放大镜背景色,透明度为0.2 */
        background-repeat: no-repeat;
        background-size: 800% 800%;
        /* 放大环境宽度增加700%,显示放大效果在环境中心 */
        background-position: -150% -150%;
        /* 外部边框宽高为200像素,计算器为总长度为800%,
           将放大效果定位,-100%表示左侧对齐,
           负数在向左偏移,-200%为上部对齐,-150%为居中 */
        border-radius: 50%;
        /* 设置边框为圆形 */
      }
    </style>
  </head>
  <body>
    <div id="img-container">
      <div id="zoom"></div>
      <div id="img" style="background-image: url(img2.jpg)"></div>
    </div>

    <script>
      const imgContainer = document.getElementById("img-container");
      const zoom = document.getElementById("zoom");
      const img = document.getElementById("img");

      imgContainer.addEventListener("mousemove", e => {
        const x = e.pageX - imgContainer.offsetLeft;
        const y = e.pageY - imgContainer.offsetTop;

        setZoomPosition(x, y);
      });

      imgContainer.addEventListener("mouseleave", () => {
        zoom.style.display = "none";
      });

      function setZoomPosition(x, y) {
        const zoomWidth = zoom.offsetWidth;
        const zoomHeight = zoom.offsetHeight;
        const imgWidth = img.offsetWidth;
        const imgHeight = img.offsetHeight;
        const bgWidth = parseInt(
          getComputedStyle(img).backgroundSize.split(" ")[0]
        );
        const bgHeight = parseInt(
          getComputedStyle(img).backgroundSize.split(" ")[1]
        );

        const ratioX = bgWidth / imgWidth;
        const ratioY = bgHeight / imgHeight;

        const bgX = -x * ratioX + zoomWidth / 2;
        const bgY = -y * ratioY + zoomHeight / 2;

        const offsetX = x - zoomWidth / 2;
        const offsetY = y - zoomHeight / 2;

        if (bgX < 0) {
          bgX = 0;
        } else if (bgX > bgWidth - zoomWidth / ratioX) {
          bgX = bgWidth - zoomWidth / ratioX;
        }

        if (bgY < 0) {
          bgY = 0;
        } else if (bgY > bgHeight - zoomHeight / ratioY) {
          bgY = bgHeight - zoomHeight / ratioY;
        }

        zoom.style.backgroundPositionX = bgX + "px";
        zoom.style.backgroundPositionY = bgY + "px";
        zoom.style.left = offsetX + "px";
        zoom.style.top = offsetY + "px";

        zoom.style.display = "block";
        // 显示放大镜
      }
    </script>
  </body>
</html>

到此为止,通过以上步骤和示例,我们就能够成功地实现一个用JavaScript实现的图片放大镜效果!

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生js实现一个放大镜效果超详细 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 原生js和jQuery实现淡入淡出轮播效果

    下面是”原生JS和jQuery实现淡入淡出轮播效果”的完整攻略。 1. 原生JS实现淡入淡出轮播效果 1.1 HTML结构 首先,我们需要先在HTML页面中定义好轮播图的结构,这里使用ul和li标签来实现,每个li标签里面放置一张轮播图。 <div class="slider"> <ul class="slid…

    css 2023年6月10日
    00
  • 使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

    我来为您详细讲解使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享的完整攻略。 一、使用CSS实现半透明遮罩效果 CSS中实现半透明黑色遮罩的方法如下: .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.…

    css 2023年6月10日
    00
  • 仿客齐集首页导航条DIV+CSS+JS [代码实例]

    下面我将针对“仿客齐集首页导航条DIV+CSS+JS [代码实例]”编写攻略,详细讲解该实例的实现过程,以及其中涉及的相关技术要点。 1. 实例介绍 “仿客齐集首页导航条”是一个非常典型的网页导航条,该实例使用了DIV、CSS、JS等技术进行实现,具有菜单动态展开和收起的功能,具有很好的交互体验。 2. 实现步骤 2.1 HTML代码编写 导航条是基于HTM…

    css 2023年6月11日
    00
  • jquery插件实现鼠标隐藏

    实现鼠标隐藏需要通过 jQuery 插件的方式,下面是具体的实现攻略: 步骤一:创建 jQuery 插件 先创建一个名为 jquery.mouseHide.js 的文件,将以下代码放入其中,以创建一个名为 mouseHide 的插件。 (function( $ ) { $.fn.mouseHide = function() { var timer; this…

    css 2023年6月10日
    00
  • CSS定义超链接样式的顺序及四个伪类的用法示例介绍

    下面是关于“CSS定义超链接样式的顺序及四个伪类的用法示例介绍”的完整攻略: 一、CSS定义超链接样式的顺序 在HTML中,超链接是通过<a>标签来实现的。想要修改超链接的样式,就要使用CSS。在CSS中,我们可以通过以下顺序来定义超链接的样式,这个顺序可以确保我们的样式能够按照我们想要的方式生效。 定义超链接的状态(link、visited、h…

    css 2023年6月10日
    00
  • 值得收藏的CSS命名规范(规则)常用的CSS命名规则

    下面是关于“值得收藏的CSS命名规范(规则)常用的CSS命名规则”的详细讲解,包含以下内容: 什么是CSS命名规范? CSS命名规范是指在编写CSS代码时,根据一定的规则和标准对CSS样式名称进行命名的方式。通过遵循CSS命名规范,我们可以更好地组织和管理我们的代码,从而提高代码的可读性和可维护性。 常用的CSS命名规则 1. BEM命名法 BEM是一种广泛…

    css 2023年6月9日
    00
  • Flask FastCGI(处理Web请求)使用方法详解

    Flask是一款轻量级的Web应用框架,可以用于快速开发Web应用。其中,FCGI是一种处理Web请求的协议,它在承载Web服务器和应用程序之间,提供了可靠的通讯机制。 在实际应用中,我们可以使用Flask FastCGI来将Flask应用部署在Web服务器上,然后通过FastCGI协议与Web服务器进行通讯。 本文将介绍Flask FastCGI的使用方法…

    Flask 2023年3月13日
    00
  • css中margin:0 auto居中问题深入探讨

    对于“css中margin:0 auto居中问题深入探讨”的完整攻略,以下是我的详细讲解: 什么是margin: 0 auto? margin:0 auto; 是CSS中实现水平居中的一种方式。这个属性值可以让元素的左右margin取值相等,并将元素水平居中。 首先,0表示上下margin为0,其次,auto表示左右margin会尽可能地均分元素的剩余宽度,…

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