1. Python技术站首页
  2. css

JavaScript 图片放大镜（可拖放、缩放效果）第4/4页

• css

这篇攻略是针对实现 JavaScript 图片放大镜（可拖放、缩放效果）的第四个页面进行细致的讲解。该页面主要实现的是放大镜的拖动和缩放效果。以下是详细的攻略：

步骤一：添加 HTML 结构

首先，我们需要在 HTML 文件中添加放大镜所需的结构，代码如下所示：

<div class="container">
  <div class="image-container">
    <img src="your-image-source" alt="your-image">
    <div class="lens"></div>
  </div>
</div>

其中，“container”类包括了全局的样式， “image-container”类用于包裹图片及其缩略图，并提供样式，而“lens”类则是放大镜的HTML标记，本页面中主要对该类进行操作。

步骤二：添加 CSS 样式

接下来，我们需要为HTML添加CSS样式，代码如下所示：

.container {
  position: relative;
}

.image-container {
  position: relative;
  width: 600px;
}

img {
  max-width: 100%;
}

.lens {
  position: absolute;
  display: none;
  top: 0;
  border: 1px solid #ddd;
}

其中，“container”类用于控制全局样式，position: relative; 的设置让 “image-container” 与其内部的的“lens”可以相对于该类进行定位。当光标穿过图片时，“lens”将变成可见状态（display: block;)；当光标从图片上离开时， “lens”将再次隐藏。

步骤三：编写JS代码

最后，我们需要编写JS代码以实现放大镜的拖动和缩放效果。本页面中，主要是对鼠标事件进行监听，并根据事件来实现操作效果，代码如下：

const lens = document.querySelector(".lens");
const imageContainer = document.querySelector(".image-container");
const image = document.querySelector("img");

let zoomLevel = 1;

image.addEventListener("mousemove", moveLens);

function moveLens(e) {
  const x = e.offsetX;
  const y = e.offsetY;

  lens.style.display = "block";

  const lensWidth = lens.offsetWidth / 2;
  const lensHeight = lens.offsetHeight / 2;

  let lensX = x - lensWidth;
  let lensY = y - lensHeight;

  if (lensX > image.width - lensWidth) {
    lensX = image.width - lensWidth;
  }

  if (lensX < lensWidth) {
    lensX = lensWidth;
  }

  if (lensY > image.height - lensHeight) {
    lensY = image.height - lensHeight;
  }

  if (lensY < lensHeight) {
    lensY = lensHeight;
  }

  lens.style.left = lensX + "px";
  lens.style.top = lensY + "px";

  zoomLevel = (image.width / lens.offsetWidth) * 1.5;
  image.style.transform = `scale(${zoomLevel})`;
}

imageContainer.addEventListener("mouseleave", () => {
  lens.style.display = "none";
  image.style.transform = "scale(1)";
});

imageContainer.addEventListener("mousedown", (e) => {
  e.preventDefault();

  let lensPosX = lens.offsetLeft;
  let lensPosY = lens.offsetTop;

  let cursorPosX = e.clientX;
  let cursorPosY = e.clientY;

  document.addEventListener("mousemove", dragLens);
  document.addEventListener("mouseup", stopDragging);

  function dragLens(e) {
    let newCursorPosX = e.clientX;
    let newCursorPosY = e.clientY;

    let lensNewPosX = lensPosX + newCursorPosX - cursorPosX;
    let lensNewPosY = lensPosY + newCursorPosY - cursorPosY;

    if (lensNewPosX < lens.offsetWidth / 2) {
      lensNewPosX = lens.offsetWidth / 2;
    }

    if (lensNewPosX > image.width - lens.offsetWidth / 2) {
      lensNewPosX = image.width - lens.offsetWidth / 2;
    }

    if (lensNewPosY < lens.offsetHeight / 2) {
      lensNewPosY = lens.offsetHeight / 2;
    }

    if (lensNewPosY > image.height - lens.offsetHeight / 2) {
      lensNewPosY = image.height - lens.offsetHeight / 2;
    }

    lens.style.left = lensNewPosX + "px";
    lens.style.top = lensNewPosY + "px";

    let percentageMovedX = (newCursorPosX - cursorPosX) / image.width;
    let percentageMovedY = (newCursorPosY - cursorPosY) / image.height;

    image.style.transformOrigin = `${-percentageMovedX * 100}% ${-percentageMovedY * 100}%`;
  }

  function stopDragging() {
    document.removeEventListener("mousemove", dragLens);
  }
});

具体来说，JS代码主要实现了如下几个操作：

  1. 监听鼠标移动事件，根据鼠标的位置，计算出放大镜需要显示的位置，以及放大比例，并对图片使用transform生成缩放效果。

  2. 监听鼠标移出图像区域事件，隐藏放大镜并还原图片大小。

  3. 监听鼠标按下事件，保存鼠标当前位置和放大镜当前位置，同时监听鼠标移动事件，根据鼠标移动的距离来更新放大镜和图片的位置。

其中，第3个操作就是拖动的实现。

示例说明

如果您想要更好的理解上述步骤，并希望获得更多的学习资料，我们这里提供了两个简单的示例说明：

  1. 在页面中添加大图及其缩略图，并进行对应的样式设置和js代码的复制即可。
<div class="container">
  <div class="image-container">
    <img src="your-image-source" alt="your-image">
    <div class="lens"></div>
  </div>
</div>

.container {
  position: relative;
}

.image-container {
  position: relative;
  width: 600px;
}

img {
  max-width: 100%;
}

.lens {
  position: absolute;
  display: none;
  top: 0;
  border: 1px solid #ddd;
}

const lens = document.querySelector(".lens");
const imageContainer = document.querySelector(".image-container");
const image = document.querySelector("img");

let zoomLevel = 1;

image.addEventListener("mousemove", moveLens);

function moveLens(e) {
  const x = e.offsetX;
  const y = e.offsetY;

  lens.style.display = "block";

  const lensWidth = lens.offsetWidth / 2;
  const lensHeight = lens.offsetHeight / 2;

  let lensX = x - lensWidth;
  let lensY = y - lensHeight;

  if (lensX > image.width - lensWidth) {
    lensX = image.width - lensWidth;
  }

  if (lensX < lensWidth) {
    lensX = lensWidth;
  }

  if (lensY > image.height - lensHeight) {
    lensY = image.height - lensHeight;
  }

  if (lensY < lensHeight) {
    lensY = lensHeight;
  }

  lens.style.left = lensX + "px";
  lens.style.top = lensY + "px";

  zoomLevel = (image.width / lens.offsetWidth) * 1.5;
  image.style.transform = `scale(${zoomLevel})`;
}

imageContainer.addEventListener("mouseleave", () => {
  lens.style.display = "none";
  image.style.transform = "scale(1)";
});

imageContainer.addEventListener("mousedown", (e) => {
  e.preventDefault();

  let lensPosX = lens.offsetLeft;
  let lensPosY = lens.offsetTop;

  let cursorPosX = e.clientX;
  let cursorPosY = e.clientY;

  document.addEventListener("mousemove", dragLens);
  document.addEventListener("mouseup", stopDragging);

  function dragLens(e) {
    let newCursorPosX = e.clientX;
    let newCursorPosY = e.clientY;

    let lensNewPosX = lensPosX + newCursorPosX - cursorPosX;
    let lensNewPosY = lensPosY + newCursorPosY - cursorPosY;

    if (lensNewPosX < lens.offsetWidth / 2) {
      lensNewPosX = lens.offsetWidth / 2;
    }

    if (lensNewPosX > image.width - lens.offsetWidth / 2) {
      lensNewPosX = image.width - lens.offsetWidth / 2;
    }

    if (lensNewPosY < lens.offsetHeight / 2) {
      lensNewPosY = lens.offsetHeight / 2;
    }

    if (lensNewPosY > image.height - lens.offsetHeight / 2) {
      lensNewPosY = image.height - lens.offsetHeight / 2;
    }

    lens.style.left = lensNewPosX + "px";
    lens.style.top = lensNewPosY + "px";

    let percentageMovedX = (newCursorPosX - cursorPosX) / image.width;
    let percentageMovedY = (newCursorPosY - cursorPosY) / image.height;

    image.style.transformOrigin = `${-percentageMovedX * 100}% ${-percentageMovedY * 100}%`;
  }

  function stopDragging() {
    document.removeEventListener("mousemove", dragLens);
  }
});
  1. 在页面中添加多个放大镜，并进行对应的样式设置和js代码修改即可。
<div class="container">
  <div class="image-container">
    <img src="your-image-source" alt="your-image">
    <div class="lens"></div>
  </div>
  <div class="image-container">
    <img src="your-image-source" alt="your-image">
    <div class="lens"></div>
  </div>
  <div class="image-container">
    <img src="your-image-source" alt="your-image">
    <div class="lens"></div>
  </div>
</div>

.container {
  position: relative;
}

.image-container {
  position: relative;
  width: 600px;
  margin-bottom: 20px;
}

img {
  max-width: 100%;
}

.lens {
  position: absolute;
  display: none;
  top: 0;
  border: 1px solid #ddd;
}

const lensList = document.querySelectorAll(".lens");
const imageContainerList = document.querySelectorAll(".image-container");
const imageList = document.querySelectorAll("img");

let zoomLevel = 1;

for (let i = 0; i < imageList.length; i++) {
  imageList[i].addEventListener("mousemove", (e) => {
    moveLens(e, lensList[i], imageList[i]);
  });

  imageContainerList[i].addEventListener("mouseleave", () => {
    lensList[i].style.display = "none";
    imageList[i].style.transform = "scale(1)";
  });

  imageContainerList[i].addEventListener("mousedown", (e) => {
    e.preventDefault();

    let lensPosX = lensList[i].offsetLeft;
    let lensPosY = lensList[i].offsetTop;

    let cursorPosX = e.clientX;
    let cursorPosY = e.clientY;

    document.addEventListener("mousemove", (e) => {
      dragLens(e, lensList[i], lensPosX, lensPosY, cursorPosX, cursorPosY, imageList[i]);
    });

    document.addEventListener("mouseup", () => {
      document.removeEventListener("mousemove", dragLens);
    });
  });
}

function moveLens(e, lens, image) {
  const x = e.offsetX;
  const y = e.offsetY;

  lens.style.display = "block";

  const lensWidth = lens.offsetWidth / 2;
  const lensHeight = lens.offsetHeight / 2;

  let lensX = x - lensWidth;
  let lensY = y - lensHeight;

  if (lensX > image.width - lensWidth) {
    lensX = image.width - lensWidth;
  }

  if (lensX < lensWidth) {
    lensX = lensWidth;
  }

  if (lensY > image.height - lensHeight) {
    lensY = image.height - lensHeight;
  }

  if (lensY < lensHeight) {
    lensY = lensHeight;
  }

  lens.style.left = lensX + "px";
  lens.style.top = lensY + "px";

  zoomLevel = (image.width / lens.offsetWidth) * 1.5;
  image.style.transform = `scale(${zoomLevel})`;
}

function dragLens(e, lens, lensPosX, lensPosY, cursorPosX, cursorPosY, image) {
  let newCursorPosX = e.clientX;
  let newCursorPosY = e.clientY;

  let lensNewPosX = lensPosX + newCursorPosX - cursorPosX;
  let lensNewPosY = lensPosY + newCursorPosY - cursorPosY;

  if (lensNewPosX < lens.offsetWidth / 2) {
    lensNewPosX = lens.offsetWidth / 2;
  }

  if (lensNewPosX > image.width - lens.offsetWidth / 2) {
    lensNewPosX = image.width - lens.offsetWidth / 2;
  }

  if (lensNewPosY < lens.offsetHeight / 2) {
    lensNewPosY = lens.offsetHeight / 2;
  }

  if (lensNewPosY > image.height - lens.offsetHeight / 2) {
    lensNewPosY = image.height - lens.offsetHeight / 2;
  }

  lens.style.left = lensNewPosX + "px";
  lens.style.top = lensNewPosY + "px";

  let percentageMovedX = (newCursorPosX - cursorPosX) / image.width;
  let percentageMovedY = (newCursorPosY - cursorPosY) / image.height;

  image.style.transformOrigin = `${-percentageMovedX * 100}% ${-percentageMovedY * 100}%`;
}

需要注意的时，如果您需要在同一页面中使用多个图片放大镜，请将JS代码修改为类似上述代码的形式，并对每个镜头使用相应的句柄设置事件监听和回调。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 图片放大镜（可拖放、缩放效果）第4/4页 - Python技术站

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

相关文章

  • 从基础开始建立一个JS代码库第1/2页

    建立一个JS代码库需要以下步骤： 第一页 1.确定库的目的和范围 一个JS代码库应该有一个明确的目的和范围，以便能够定义它应该包含哪些代码，哪些不应该包含。例如，一个处理日期和时间的库可能包括解析、格式化、计算等操作的代码，但不应该包括其它的操作，如请求网络数据或渲染UI。 2.选择项目的目录结构 选择一个合适的目录结构可以帮助组织代码，并方便其它开发人员更…

    css 2023年6月10日
    00

  • CSS常用样式之绘制双箭头的示例代码

    下面是关于“CSS常用样式之绘制双箭头的示例代码”的细致讲解，包含了两个示例说明。 1. 思路分析 绘制双箭头需要用到CSS的伪元素：::before 和 ::after，双箭头效果就是将一个箭头嵌套在另一个箭头的里面，通过旋转和透明度调整位置达到叠加的效果。因此，我们需要设计两个箭头，一个外层箭头，一个内层箭头，并且通过CSS动画实现旋转和透明度变化。 2…

    css 2023年6月10日
    00

  • 纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示

    首先，实现兼容IE7及以上的宽度自适应无限级导航菜单需要用到CSS的伪类选择器。我们可以使用:hover和:focus来表示菜单项的悬停和聚焦状态，使用>和+来表示子菜单和兄弟菜单的关系，同时使用display:none和display:block来控制菜单的隐藏和显示。具体实现步骤如下： 1.给菜单的父元素设置position:relative属性，…

    css 2023年6月10日
    00

  • 怎样在html文档里做隔行换色的多行方法

    要在HTML文档中做隔行换色，我们可以使用CSS中的伪类选择器nth-child()来实现。以下是详细的攻略： 步骤一：在HTML中为需要隔行换色的元素添加class或id属性 在HTML中找到需要隔行换色的元素，可以是table中的tr元素或是ul/li列表中的li元素，为其添加class或id属性。例如： <table> <tr cla…

    css 2023年6月10日
    00

  • 使用HTML5 Canvas API控制字体的显示与渲染的方法

    HTML5 Canvas API是一种强大的工具，可以帮助我们控制字体的显示和渲染。下面是使用HTML5 Canvas API控制字体显示和渲染的方法攻略： 1. 在canvas上绘制文本 Canvas可以让我们在画布上绘制文本。以下是绘制文本的基本方法： <canvas id="myCanvas"></canvas&g…

    css 2023年6月11日
    00

  • webpack4 从零学习常用配置(小结)

    我来详细讲解一下“webpack4 从零学习常用配置(小结)”的完整攻略。 简介 webpack 是一个模块打包工具，它可以将多个模块打包成一个文件，使用起来非常灵活，比如可以将多个 JavaScript 文件打包成一个，或者将多个 CSS 文件打包成一个等。本文主要讲解 webpack4 的常用配置。 安装 webpack 首先需要安装 webpack 和…

    css 2023年6月9日
    00

  • CSS 实现 10 种现代布局的代码

    CSS 实现现代布局有很多种方式，但是通常我们可以通过浮动、定位、Flexbox 和 CSS Grid 等技术来实现。下面是一份完整的攻略，让你了解如何实现 10 种常见的现代布局，并包含了两个示例说明。 1. 上下左右布局 这种布局方式也被称为定位布局，需要使用到 position 属性来设置元素的位置。通常，我们可以将容器设置为 position: re…

    css 2023年6月10日
    00

  • 基于Modernizr 让网站进行优雅降级的分析

    基于Modernizr进行网站优雅降级可以让网站在老版本浏览器中正常展示，而在支持HTML5和CSS3的现代浏览器中则展示更加美观的效果。 以下是针对”基于Modernizr 让网站进行优雅降级的分析”步骤的详细攻略： 步骤一：添加Modernizr到项目中 首先，在网站的HTML文件中引入Modernizr。可以从官网下载Modernizr的JS文件，或者…

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