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日

相关文章

  • CSS3属性使网站设计增强同时不消弱可用性

    当使用CSS3属性时，我们需要注意以下几点，才能使网站设计增强而不消弱可用性： 1. 逐步增强设计 为了保证网站的可用性，我们可以逐步对网站进行设计增强。例如，我们可以先使用不依赖于CSS3的标准CSS属性来设计网站，然后再逐步引入CSS3属性，这样可以确保设计增强不会影响网站的可用性。 2. 使用媒体查询 媒体查询可以根据设备屏幕的大小、设备分辨率、设备方…

    css 2023年6月10日
    00

  • css3与html5实现响应式导航菜单(导航栏)效果分享

    谢谢你对这个话题的询问。下面我将为你详细讲解如何使用CSS3和HTML5实现响应式导航菜单效果，以下是攻略： 第一步：HTML 结构 首先，我们需要在 HTML 中编写导航栏的结构，具体的代码如下所示： <div class="nav"> <div class="logo"> <a hre…

    css 2023年6月10日
    00

  • 这是今年前端最常见的面试题，你都会了吗(推荐)

    下面是“这是今年前端最常见的面试题，你都会了吗(推荐)”的完整攻略。 什么是这道面试题 这道面试题是前端开发中经常遇到的异步编程问题，主要考察了解 JavaScript 中异步编程的基础机制和常用方法。 面试题的解法 1. 回调函数 这是最早、也是最常见的一种异步编程方法。通过传递回调函数，异步函数执行完成后调用回调函数来处理返回结果。 下面是一个例子： f…

    css 2023年6月10日
    00

  • CheckBoxList两列并排编译为表格显示具体实现

    下面是详细讲解“CheckBoxList两列并排编译为表格显示”的攻略： 1. 理解需求 在实现“CheckBoxList两列并排编译为表格显示”的功能之前，首先我们需要明确需求。在本次需求中，我们需要将CheckBoxList控件中的选项（字符串）按照两列并排的方式编译为表格进行显示。具体来说，我们需要完成以下步骤： 从数据库或其他数据源中获取选项的列表数…

    css 2023年6月10日
    00

  • 人人网javascript面试题 可以提前实现下

    如果你要应聘人人网或者其他公司的JavaScript开发岗位，可能需要准备一些面试题。其中，人人网的JavaScript面试题是非常有名的。可以去Github上搜索“RenRenFE-interview”这个repo，找到该题的原题目以及解答。 如果你想提前实现这道面试题，建议按以下步骤进行： 首先，仔细阅读题目要求。该题要求在一个表格中，实现字符计数器、列…

    css 2023年6月11日
    00

  • gif可以当成css的背景图片与普通图片是一样的

    首先，需要明确的是GIF可以作为CSS的背景图片，它与其他格式的图片没有什么本质区别。只是相对于静态的背景图片，GIF可以通过其帧动画特性展现动态效果，感官上更加生动有趣。 要在CSS中使用GIF作为背景图片，可以按照如下步骤操作: 在CSS文件中声明一个样式类，例如：.gif-bg： .gif-bg { background-image: url(‘./y…

    css 2023年6月9日
    00

  • CSS Sprite从大图中截取小图完整教程

    CSS Sprite从大图中截取小图完整教程 什么是CSS Sprite CSS Sprite是指将网页中的多个小图标或小图片拼接在同一张大图上，通过CSS background-position来进行定位，从而减小网页的请求次数，加快网页的加载速度。 如何实现CSS Sprite 实现CSS Sprite一般分为以下步骤： 将多个小图片合并成一张大图片，并…

    css 2023年6月10日
    00

  • 使用CSS样式position:fixed水平滚动的方法

    要实现水平滚动，我们可以使用CSS样式中的position与overflow属性。 position: fixed 使用position: fixed可以将元素定位到浏览器窗口的固定位置，不随用户的滚动而变化，达到水平滚动的效果。 需要注意的是，我们需要设置left或right属性的值来确定元素的位置。比如，将一个导航栏固定在网页的左侧，可以写出如下代码： …

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