原生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日

相关文章

  • 基于spring+hibernate+JQuery开发之电子相册(附源码下载)

    本文介绍了基于Spring、Hibernate和JQuery技术栈来开发电子相册的完整攻略。电子相册是一种可以在Web端展示相片的应用程序。 1. 环境要求 JDK:1.8+ Eclipse IDE:4.7+(Photon/2018年版) Maven:3+ Tomcat:8+ MySQL:5.6+ Spring Framework:5.0+ Hibernat…

    css 2023年6月10日
    00
  • CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)

    以下是详细的攻略步骤: 一、创建HTML结构 首先,我们需要在HTML中创建菜单的结构。如下所示: <div class="menu-container"> <div class="menu-item">Item 1</div> <div class="menu-it…

    css 2023年6月9日
    00
  • jQuery 拖动层(在可视区域范围内)

    jQuery 拖动层是一种常见的 Web 开发技术,它允许 Web 页面上的元素随着用户的鼠标拖动而移动。如果你想要实现拖动层的功能,并且希望元素只能在可视区域范围内进行拖动,那么可以按照以下步骤进行操作。 设置样式 首先需要在 CSS 文件中设置元素的样式。例如,可以设置一个 div 元素,宽度和高度都为 100 像素,并设置背景色和边框。 .dragga…

    css 2023年6月11日
    00
  • css 两边固定中间自适应布局的实现

    下面是CSS两边固定中间自适应布局的实现攻略: 1. 使用flex布局实现 Flex布局可以很方便地实现两边固定,中间自适应的布局效果。 示例代码: <div class="container"> <div class="left"></div> <div class=&quo…

    css 2023年6月9日
    00
  • JS实现侧悬浮浮动实例代码

    JS实现侧悬浮浮动是一种常见的网页侧边栏布局方式,下面是实现这种效果的完整攻略: HTML结构 首先,我们需要在HTML中定义容器,侧边栏内容和主体内容。例如,我们可以定义一个名为container的div作为整个容器,定义两个名为sidebar和mainContent的div存放侧边栏和主体内容。 <div class="container…

    css 2023年6月10日
    00
  • Flask 路由(Route)使用方法详解

    Flask是一种轻量级的Python Web框架,它简单易用,适合快速开发小型Web应用。其中路由(Route)是Flask Web应用中最重要的部分,它可以帮助我们管理 URL 请求和响应,本文将详细介绍Flask路由的使用方法,并提供完整的代码示例。 Flask 路由的基本使用方法 我们可以通过在Flask应用实例上定义路由函数,来处理不同的URL请求。…

    Flask 2023年3月13日
    00
  • vue项目中如何引入cesium

    为了便于理解,我们可以将这个问题拆成以下几个步骤: 在vue项目中安装cesium 配置webpack,以支持cesium加载 在vue组件中引用cesium 下面,我将详细介绍这三个步骤。 步骤1: 在vue项目中安装cesium 首先,在Vue项目根目录下,使用npm安装cesium: npm install cesium –save 步骤2: 配置w…

    css 2023年6月9日
    00
  • jQuery 复合选择器应用的几个例子

    我将为您详细讲解“jQuery 复合选择器应用的几个例子”的完整攻略,过程中将为您举出两个示例说明。 一、什么是复合选择器 复合选择器 是针对多个属性值选择元素的选择器。例如:$(“p:first-of-type.red”)是由两个简单选择器p:first-of-type和.red组成。 二、使用复合选择器的注意事项 在使用复合选择器时需要注意以下两点: 选…

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