html、css、js实现图片放大功能，包括拖拽和滚动焦点缩放

已于 2023-08-14 11:29:44 修改
阅读量4.3k 收藏 23
点赞数 12
文章标签： html css javascript
于 2023-07-27 16:47:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58441775/article/details/131963598
版权

1. 前言

  • 实现图片点击放大、拖拽、滚轴滚动焦点缩放功能
  • 放了完整，coder可以复制去看效果，不要忘记替换代码中的图片路径

2. 代码

2.1 html+js+css完成代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div class="imgBox">
    <img style="width: 150px; height: 150px; padding: 10px" src="../../../images/HTTP工作原理.jpg" class="img-responsive" />
    <img style="width: 150px; height: 150px; padding: 10px" src="../../../images/HTTP报文结构.jpg" class="img-responsive" />
  </div>
  <div id="outerdiv" style="
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 2;
        width: 100%;
        height: 100%;
        display: none;
      ">
    <img id="bigimg" src="" />
  </div>

  <script>
	/**
	 * 实现图片点击放大、拖拽、滚轴滚动焦点缩放功能，相关参数、函数声明
	 */
    let imgWidth, imgHeight; // 图片点击放大初始尺寸参数
    let maxZoom = 4; //最大缩放倍数
    let minreduce = 0.5; // 最小缩放倍数
    let initScale = 1; //滚动缩放初始倍数，并不是图片点击放大的倍数
    let isPointerdown = false; //鼠标按下的标识
    //记录鼠标按下坐标和按下移动时坐标
    let lastPointermove = {
      x: 0,
      y: 0,
    };
    //移动过程从上一个坐标到下一个坐标之间的差值
    let diff = {
      x: 0,
      y: 0,
    };
    //图片放大后左上角的坐标，主要结合diff参数用于鼠标焦点缩放时图片偏移坐标
    let x = 0;
    let y = 0;

    // 记录节点
    const allImg = document.querySelectorAll(".imgBox img");
    const outerdiv = document.querySelector("#outerdiv");
    const image = outerdiv.querySelector("#bigimg");
    window.onload = function () {
      allImg.forEach((item) => {
        item.addEventListener("click", (e) => {
          const that = e.target;
          image.style.transform = "scale(1)";
          //图片放大展示函数调用
          imgShow(that);
          // 监听鼠标滚动事件
          window.addEventListener("wheel", handleStopWheel, {
            passive: false,
          });
          // 拖转事件调用
          imgDrag();
        });
      });
    };

    function imgShow(that) {
      let src = that.getAttribute("src");
      image.setAttribute("src", src);

      // 设置尺寸和调整比例
      let windowW = document.documentElement.clientWidth;
      let windowH = document.documentElement.clientHeight;
      let realWidth = image.naturalWidth; //获取图片的原始宽度
      let realHeight = image.naturalHeight; //获取图片的原始高度
      let outsideScale = 0.8;
      let belowScale = 1.4;
      let realRatio = realWidth / realHeight;
      let windowRatio = windowW / windowH;

      // 说明：下面是我自己的一些判断逻辑，大致意思就是图片的真实尺寸大于屏幕尺寸则使用屏幕尺寸，如果小于屏幕尺寸就使用自己本身的尺寸；并根据大于或者小于的比例对图片的尺寸进一步调整。coder可以根据自己的要求进行修改。
      if (realRatio >= windowRatio) {
        if (realWidth > windowW) {
          imgWidth = windowH * outsideScale;
          imgHeight = (imgWidth / realWidth) * realHeight;
        } else {
          if (realWidth * belowScale < windowW) {
            imgWidth = realWidth * (belowScale - 0.2);
            imgHeight = (imgWidth / realWidth) * realHeight;
          } else {
            imgWidth = realWidth;
            imgHeight = realHeight;
          }
        }
      } else {
        if (realHeight > windowH) {
          imgHeight = windowH * outsideScale;
          imgWidth = (imgHeight / realHeight) * realWidth;
        } else {
          if (realHeight * belowScale < windowW) {
            imgHeight = realHeight * (belowScale - 0.2);
            imgWidth = (imgHeight / realHeight) * realWidth;
          } else {
            imgWidth = realWidth;
            imgHeight = realHeight;
          }
        }
      }

      //设置放大图片的尺寸、偏移量并展示
      image.style.width = imgWidth + "px";
      image.style.height = imgHeight + "px";
      x = (windowW - imgWidth) * 0.5;
      y = (windowH - imgHeight) * 0.5;
      image.style.transform = `translate3d(${x}px, ${y}px, 0)`;
      outerdiv.style.display = "block";

      // 点击蒙版及外面区域放大图片关闭
      outerdiv.onclick = () => {
        outerdiv.style.display = "none";
        initScale = 1;
        window.removeEventListener("wheel", handleStopWheel);
      };

      // 阻止事件冒泡
      image.onclick = (e) => {
        e.stopPropagation();
      };
    }

    function handleStopWheel(e) {
      let itemSizeChange = 1.1; //每一次滚动放大的倍数
      if (e.target.id == "bigimg") {
        // 说明：e.dataY如果大于0则表示鼠标向下滚动，反之则向上滚动，这里设计为向上滚动为缩小，向下滚动为放大
        if (e.deltaY < 0) {
          itemSizeChange = 1 / 1.1;
        }
        let _initScale = initScale * itemSizeChange;

        // 说明：在超过或低于临界值时，虽然让initScale等于maxZoom或minreduce，但是在后续的判断中放大图片的最终倍数并没有达到maxZoom或minreduce，而是跳过。
        if (_initScale > maxZoom) {
          initScale = maxZoom;
        } else if (_initScale < minreduce) {
          initScale = minreduce;
        } else {
          initScale = _initScale;
        }
        const origin = {
          x: (itemSizeChange - 1) * imgWidth * 0.5,
          y: (itemSizeChange - 1) * imgHeight * 0.5,
        };
        // 计算偏移量
        if (_initScale < maxZoom && _initScale > minreduce) {
          x -= (itemSizeChange - 1) * (e.clientX - x) - origin.x;
          y -= (itemSizeChange - 1) * (e.clientY - y) - origin.y;
          e.target.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${initScale})`;
        }
      }

      // 阻止默认事件
      e.preventDefault();
    }

    function imgDrag() {
      // 绑定 鼠标按下事件
      image.addEventListener("pointerdown", pointerdown);
      // 绑定 鼠标移动事件
      image.addEventListener("pointermove", pointermove);
      image.addEventListener("pointerup", function (e) {
        if (isPointerdown) {
          isPointerdown = false;
        }
      });
      image.addEventListener("pointercancel", function (e) {
        if (isPointerdown) {
          isPointerdown = false;
        }
      });
    }

    function pointerdown(e) {
      isPointerdown = true;
      console.log(e.pointerId)

      // 说明：Element.setPointerCapture()将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标，直到捕获被释放。可以理解为：在窗口不是全屏情况下，我在拖动放大图片时即使鼠标移出可窗口之外，此时事件还是捕获在该放大图片上。
      image.setPointerCapture(e.pointerId);

      lastPointermove = {
        x: e.clientX,
        y: e.clientY,
      };
    }

    function pointermove(e) {
      if (isPointerdown) {
        const current1 = {
          x: e.clientX,
          y: e.clientY,
        };
        diff.x = current1.x - lastPointermove.x;
        diff.y = current1.y - lastPointermove.y;
        lastPointermove = {
          x: current1.x,
          y: current1.y,
        };
        x += diff.x;
        y += diff.y;
        image.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${initScale})`;
      }
      e.preventDefault();
    }
  </script>
</body>

</html>

2.2 函数分析

  • imgShow函数：

    • 主要功能：显示放大后的图片，为蒙版添加一个点击隐藏放大图片的事件，给放大图片添加点击阻止冒泡事件；
    • 得到x、y的值是放大图片在屏幕中高度和宽度留下空白一半的值。
      • 原理：屏幕宽高尺寸减去图片宽高尺寸得到值之后取一半；
      • 可以利用这个值使用transform 属性让图片在屏幕中间。

  • handleStopWheel函数

    • 主要功能：鼠标滚动缩放已经放大的图片，同时得到偏移x、y值，实现焦点缩放；
    • e.deltaY大于0则表示鼠标滚轴向下滚动，反之则向上滚动，这里设计为向上滚动为缩小，向下滚动为放大；
       const origin = {
     x: (itemSizeChange - 1) * imgWidth * 0.5,
     y: (itemSizeChange - 1) * imgHeight * 0.5,
   };
   // 计算偏移量
   if (_initScale < maxZoom && _initScale > minreduce) {
     x -= (itemSizeChange - 1) * (e.clientX - x) - origin.x;
     y -= (itemSizeChange - 1) * (e.clientY - y) - origin.y;
     e.target.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${initScale})`;
   }
    • (itemSizeChange - 1) 有两个值：0.1和-0.09090990...也就是放大一次是10%，缩小一次大约9%；
    • origin 对象得到值，为一次缩放时，放大图片在原有的基础之上增加或者减少的值的一半
    • (e.clientX - x)，
      • x为第一次缩放时imgShow函数中得到的值；e.clientX为鼠标所在位置的x轴坐标值
      • 得到的结果为：放大图片缩放之前鼠标距离放大图片左侧边缘的间距；
    • 分析稍微有点乱，下面是一个举例：
      • 设屏幕大小为200x200，放大图片width:100px，height:100px，鼠标位于则120x120，做一次放大操作
      • 放大图片打开：x = (200-100)*0.5, y = 50；
      • origin = {x: 0.1 * 100 * 0.5, y: 5}；
      • (itemSizeChange - 1) * (e.clientX - x) - origin.x = 0.1 * ( 120 - 50 ) - 5 = 2；
      • (itemSizeChange - 1) * (e.clientY - y) - origin.y = 2；
      • 计算需要的偏移量为x = 50 - 2 ；y = 48 ，从原来的偏移（50,50），变为了（48,48）放大10%

  • imgDrag函数：

    • 主要功能：实现拖拽功能，在鼠标按下时（pointerdown函数）指定为未来指针事件的捕获目标，并且记录最初的鼠标坐标；鼠标移动时（pointermove函数）计算鼠标移动后坐标与上一次鼠标坐标的差值，得到放大图片最终需要偏移的值。

3.效果参考

在这里插入图片描述

4. 参考链接

  • https://juejin.cn/post/7009892447211749406

5. 写在最后

如果有所帮助，希望能够点赞、收藏支持，谢谢喽。

gladShark
关注
  • 12
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
html 页面缩放事件,使用HTML5实现通过鼠标滚轮事件放大和缩小图片的功能
weixin_39805924的博客
06-03 2151
您和我都知道，向HTML5网页添加鼠标滚轮事件可以更好地允许用户与网页进行交互. 在HTML5中，鼠标滚轮不仅可以在网页上上下滑动，实际上，您还可以依靠它来完成更，例如放大和缩小视图平面.看看实际的示范效果大多数浏览器支持鼠标滚轮事件，因此您可以先订阅鼠标滚轮事件方法. 触发事件后，您将获得一个名为wheelDelta的属性，该属性表示鼠标滚轮的大小刚好改变，其中正值表示滚轮向下滑动，而负值表示滚...
通过鼠标滚轮放大 缩小图片，同时防止滚轮事件 影响body的滚动条
weixin_43627719的博客
04-08 287
方案 1：当鼠标移入 div 时，设置 body 的 overflow 为 hidden，移出时候，设置 overflo 为 auto。放大缩小图片很简单，但是当我移动滚轮的时候，发现滚轮的事件冒泡出去了。最终做到了当鼠标移到图片上时，仅放大 缩小图片，不触发外部的滚动条。body 中某个 div 滚动，防止冒泡到 body 滚动。上篇文章中，我最里层的图片 要支持鼠标滚轮 放大缩小图片。自动触发了body或者div的滚动条，页面晃动个不停。同时放一篇文章 博主解决的我的麻烦(留着以后备查)…
CSS - 鼠标移入图片放大及缓慢过渡效果（仅 “内部“ 放大，不改变容器大小）鼠标移入图片变成发大镜效果
王佳斌
08-04 8074
css - 鼠标移入图片放大及缓慢过渡效果（仅 "内部" 放大，不改变容器大小）鼠标移入图片变成发大镜效果，CSS实现鼠标移入图片放大效果，css鼠标移入图片变成发大镜效果，css鼠标移入盒子，里面的图片放大，不改变盒子大小，使用CSS3实现鼠标移到图片上图片放大，html鼠标悬停图片放大或缩小，html鼠标经过图片放大，CSS实现鼠标移入时图片的放大效果及缓慢过渡效果，css鼠标移入图片变成发大镜效果。css鼠标进入图片放大......
如何使用CSS和JS实现鼠标移动到图片上的时候实现图片的放大和缩小效果。
最新发布
emmmaha的博客
05-23 559
替换为您实际的图片路径，以及根据需要调整放大倍数和过渡效果的时间。这样，当鼠标移动到图片上方时，图片就会放大显示。您可以使用CSS和JavaScript结合实现当鼠标移动到图片上方时，让图片放大的效果。的样式，确保图片放大后不会溢出容器。然后对图片设置了过渡效果。将图片放大1.2倍（实现缩小可将数值定在(0,1)内）。在上面的示例中，我们首先创建了一个包含图片的。，当鼠标悬停在容器上时（即。
教你实现图片的点击缩放和移动
山有木兮木有枝，心悦君兮君不知
07-04 3135
纯js实现缩略图点击放大，并且支持滚轮控制缩放倍数，以及鼠标移动图片位置
html图片控制处理放大缩小移动多种案例(附源码)
xcLeigh
11-16 5129
html图片控制处理放大缩小移动多种案例(附源码)，简约图片预览，仿京东图片放大镜效果，图片查看器，可放大缩小，旋转，图片放大镜效果，图片放大缩小查看，图片放大显示，支持滚轮调整大小，图片上下滑动缩略图字幕效果，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
[CSS] CSS实现鼠标移入图片放大效果
iChangebaobao的博客
05-18 1万+
CSS实现鼠标移入图片放大效果 一般在官网比较常见这种动效，当鼠标移入图片时可以看到视觉放大的效果，这里用到一个css属性 object-fit: cover; object-fit 属性 object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。 .activity-content-img{ width: 100%; height: 100%;
html鼠标放在图片上图片自动放大，css使图片自动放大
热门推荐
weixin_52450702的博客
03-22 2万+
目的：将鼠标放在图片上，图片自动放大，鼠标移开后图片大小复原。 实现过程： 方法一：通过hover来控制鼠标放到图片上时图片的大小，通过transition来控制变化的时间。 具体代码如下 <!DOCTYPE html> <html> <head> <style> div { width:100px; height:200px; background:red; transition:width 2s; } div:hover { width:200px;
Html+Css实现鼠标经过图片放大
qq_40482720的博客
08-15 5814
鼠标经过图片，图片有一个放大的过渡效果实现(Html+Css)
html鼠标划到图片位置变大
m0_73525704的博客
11-14 1479
以上是鼠标划到图片位置，进行放👣👣👣👣👣👣👣👣👣👣👣👣👣👣👣👣 以下是代码 css部分 <style> .box{ width: 300px; height: 800px; border-style:solid; margin:0 auto; } h3{ color:blue; } la
鼠标放上图片放大缩小（css3 html5）
11-18
鼠标放上图片放大缩小（css3 html5） 鼠标放上图片放大缩小（css3 html5） 鼠标放上图片放大缩小（css3 html5） 鼠标放上图片放大缩小（css3 html5）
纯CSS3实现的图片放大缩小
12-18
纯CSS3实现的图片放大缩小效果
HTML css图片放大效果
05-30
HTML css图片放大效果，鼠标放在图片上后图片放大，离开后缩小
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
41.jquery拖动滚动条控制图片滚动及图片放大特效的示例 42.jquery旋转式图片切换并带图片放大功能 43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
JavaScript_JQuery_CSS_DIV漂亮的实例
12-29
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
100多个JQuery效果示例（实例）div+css+javascrpit
04-09
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
jQuery悬浮图片上13种超炫效果
09-14
jQuery是一种广泛应用于网页开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在这个主题“jQuery悬浮图片上13种超炫效果”中，我们将探讨如何利用jQuery来实现各种创新且...
JavaScript实现图片鼠标位置的放大缩小及拖拽功能示例
06-10
以下是一个简单的JavaScript实现图片鼠标位置的放大缩小及拖拽功能的示例： HTML代码： ```html <div id="image-container"> <img id="image" src="example.jpg" /> </div> ``` CSS代码： ```css #image-container { width: 500px; height: 500px; overflow: hidden; position: relative; } #image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: move; } ``` JavaScript代码： ```javascript var container = document.getElementById("image-container"); var image = document.getElementById("image"); // 初始缩放比例为1 var scale = 1; // 鼠标按下时的位置 var mouseX = 0; var mouseY = 0; // 鼠标是否按下 var isMouseDown = false; // 鼠标按下时记录鼠标位置 container.addEventListener("mousedown", function(event) { isMouseDown = true; mouseX = event.clientX; mouseY = event.clientY; }); // 鼠标松开时重置鼠标状态 container.addEventListener("mouseup", function(event) { isMouseDown = false; }); // 鼠标移动时缩放或拖拽图片 container.addEventListener("mousemove", function(event) { if (isMouseDown) { // 鼠标按下时拖拽图片 var deltaX = event.clientX - mouseX; var deltaY = event.clientY - mouseY; image.style.left = parseInt(image.style.left) + deltaX + "px"; image.style.top = parseInt(image.style.top) + deltaY + "px"; mouseX = event.clientX; mouseY = event.clientY; } else { // 鼠标未按下时缩放图片 var deltaScale = 0; if (event.deltaY < 0) { deltaScale = 0.1; } else if (event.deltaY > 0) { deltaScale = -0.1; } scale += deltaScale; // 最小缩放比例为0.1 scale = Math.max(scale, 0.1); image.style.transform = "scale(" + scale + ")"; } }); ``` 这段代码实现了以下功能： 1. 鼠标按下并拖拽图片时，图片跟随鼠标移动。 2. 鼠标未按下时，通过滚轮上下滑动实现图片的放大缩小，最小缩放比例为0.1。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值