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日

相关文章

  • css 跨浏览器实现float:center

    CSS 实现跨浏览器的 float: center布局攻略 1. 实现原理 float: center 的实现原理是通过利用 text-align 和 display 属性来完成。首先我们需要将要水平居中的元素转化为行内块级元素，并且将其外层元素设置为 text-align: center；然后再通过子元素的 margin 取值来实现元素的居中对齐。 2. …

    css 2023年6月10日
    00

  • 关于CSS中的display:table-cell使用技巧的几种应用

    关于CSS中的display:table-cell使用技巧的几种应用 在CSS中，display:table-cell这一属性用法非常广泛，它可以帮助我们快速实现一些表格布局的效果，也可以实现一些类似于flex布局一样的特殊布局效果，下面我们详细介绍一下这一属性的几种常见用法： 1. 实现响应式的3等分宽度布局 通过使用display:table-cell属…

    css 2023年6月10日
    00

  • css中定位中的absolute和relative是什么意思

    CSS中的定位是指如何让HTML中的元素出现在页面上的具体位置。在CSS中，有两种主要的定位方式：absolute和relative。 absolute定位：绝对定位，使元素相对于最近的非static（默认）定位的父元素进行定位。如果没有找到对应的非static定位元素，则以body元素为参考定位元素。这意味着即使页面滚动，元素也将保持在原始位置。 示例代码…

    css 2023年6月9日
    00

  • CSS样式按整洁易懂的结构组织

    在编写CSS样式时，整洁易懂的结构组织是非常重要的。这可以使代码易于阅读、维护和修改。以下是CSS样式按整洁易懂的结构组织的完整攻略： 1. 选择器的组织 在编写CSS代码时，选择器的组织是很重要的。通常情况下，我们使用层叠的选择器结构来定义样式。在定义选择器时，应该优先考虑ID选择器、class选择器，然后再使用标签名选择器。这样可以提高代码的可读性、性能…

    css 2023年6月9日
    00

  • JS+CSS相对定位实现的下拉菜单

    JS+CSS相对定位实现的下拉菜单是网页制作中比较常用的一种效果，它可以让页面菜单更加美观、实用。下面是它的完整攻略。 第一步：HTML布局 首先，需要定义一个下拉菜单触发器和下拉菜单的容器，代码如下： <div class="dropdown"> <button class="dropdown-trigger…

    css 2023年6月9日
    00

  • css3实现图片遮罩效果鼠标hover以后出现文字

    实现图片遮罩效果并在鼠标hover时出现文字可以通过CSS3的伪元素和hover伪类实现。下面是具体步骤： 步骤一：HTML代码 首先，需要在HTML中添加一张图片和对应的文字。例如： <div class="image-box"> <img src="img/pic1.jpg"> <di…

    css 2023年6月10日
    00

  • css中让元素隐藏的多种方法

    下面是“CSS中让元素隐藏的多种方法”的详细攻略： 一、使用display属性控制隐藏 display: none; 此方法常用于需要完全隐藏某个元素的情况。它会将元素从页面中移除，并且不占据任何空间。 示例代码： “`css element { display: none;}“` visibility: hidden; 此方法可以隐藏元素，但会保留元素…

    css 2023年6月10日
    00

  • Vue前端项目自适应布局的简单方法

    我来详细讲解一下“Vue前端项目自适应布局的简单方法”的完整攻略。 目录 背景介绍 解决方案 使用vw单位 使用flex布局 示例说明 示例1：使用vw单位 示例2：使用flex布局 总结 背景介绍 随着移动端设备的普及，越来越多的网站需要进行自适应布局，以适应不同的屏幕尺寸，保证用户体验。Vue前端项目也不例外。但是，对于一些初学者来说，很难在Vue项目中…

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