1. Python技术站首页
  2. css

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

• css

下面我将详细讲解“原生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)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

    实现鼠标移入时下划线向两边展开的效果可以使用CSS3中的伪元素::before和::after来实现，具体步骤如下： 首先需要在HTML中给需要添加鼠标移入效果的文字元素添加一个类名，例如：class=”underline”。 在CSS中使用伪元素::before和::after为文字下方添加两条横线，并设置样式，例如： .underline { posit…

    css 2023年6月10日
    00

  • CSS3 对过渡(transition)进行调速以及延时

    CSS3 提供了对过渡（transition）进行调速以及延时的功能，使元素的动画效果更加流畅和自然。在进行过渡调速以及延时时，需要借助两个 CSS 属性：transition-timing-function 和 transition-delay。 transition-timing-function transition-timing-function 用…

    css 2023年6月10日
    00

  • JS中解决谷歌浏览器记住密码输入框颜色改变功能

    在JS中，当用户在谷歌浏览器中输入用户名和密码并允许浏览器记住密码后，下次用户访问该网站时，浏览器会自动填充该用户的用户名和密码。但是，有时会遇到这样一个问题：输入框颜色改变，此时用户很难区分哪些输入框已经被填充。 解决这个问题的方法是在页面加载完成后，使用JavaScript检测所有的输入框是否有缓存，如果有，则将其背景色更改为不同于其他输入框的颜色。以下…

    css 2023年6月9日
    00

  • ES6实现图片切换特效代码

    现在我将为你详细讲解“ES6实现图片切换特效代码”的完整攻略。 1. 准备工作 在开始编写代码前，我们需要准备一些工作： 1.1 HTML 首先，我们需要在HTML中设置图片的容器和按钮。具体的HTML代码如下： <div class="img-container"> <img src="image1.jpg&…

    css 2023年6月10日
    00

  • vue中使用hover选择器无效的问题

    关于“vue中使用hover选择器无效的问题”，我向您提供以下攻略： 问题解析 在Vue项目的开发过程中，有时会出现使用CSS的hover选择器无效的问题。这通常是由于Vue的特点所引起的。 Vue是一款渐进式JavaScript框架，它采用数据驱动的思想，将HTML、CSS、JS分离，因此在Vue组件中，CSS作用域默认是局部的，也就是说，所编写的CSS样…

    css 2023年6月9日
    00

  • JS实现点击button按钮切换图片

    JS实现点击button按钮切换图片的过程可以分为以下几个步骤： 在HTML文件中创建一个img元素，并给它一个id。 创建一个button按钮，并给它一个id。 使用JavaScript获取到img元素和button按钮。 在JavaScript中为button按钮添加一个点击事件的监听器。 在点击事件监听函数中，更改img元素的src属性以切换图片。 接…

    css 2023年6月11日
    00

  • 利用纯css实现table固定列与表头中间横向滚动的思路和实例

    下面我来详细讲解“利用纯CSS实现table固定列与表头中间横向滚动”的思路和实现步骤。 思路 要实现表头和固定列的横向滚动，需要将表格分为三部分：左侧固定列、中间表头、右侧内容。而为了保证左侧固定列的位置不会改变，需要给该列添加固定的宽度。 在滚动时，需要通过对表头和右侧内容的scroll事件进行监听，来同步滚动位置，保证左侧固定列的位置不变。 实现步骤 …

    css 2023年6月10日
    00

  • FrontPage超链接默认颜色怎么修改?

    首先要理解超链接默认颜色的概念。默认情况下，HTML页面中的超链接默认颜色是蓝色，已访问的超链接颜色是紫色，未访问的超链接颜色是红色。 如果要修改超链接默认颜色，可以通过以下步骤实现： （1）添加CSS样式表到HTML页面中，例如： <head> <style> a:link { color: green; } a:visited {…

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