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

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函数:

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

    • 主要功能:鼠标滚动缩放已经放大的图片,同时得到偏移xy值,实现焦点缩放;
    • 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 - 2y = 48 ,从原来的偏移(50,50),变为了(48,48)放大10%
  • imgDrag函数:

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

3.效果参考

在这里插入图片描述

4. 参考链接

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

5. 写在最后

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

  • 11
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等,可以做为你的学习设计参考。 jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 jQuery+CSS实用图片收缩与放大效果插件 jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画按钮图片手动与自动切换的特效代码 jquery一页多用的飞飞图片幻灯插件演示 jquery仿flash产品图片多角度展示特效代码 jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 jquery仿flash的图片幻灯片播放特效实例完整版 jquery仿LightBox图片盒子单击逐渐放大图片展示的插件下载 jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 jQuery仿动感flash自动滚动图片切换广告插件 jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) jquery仿苏宁易购商城产品图片全方位展示功能 jquery制作漂亮按钮示例打包 jQuery动态切换网页背景的大块图片的导航栏代码 jquery图文排行混合互相切换效果(仿Vancl效果) jQuery图片AnimatedPortfolioGallery jQuery图片AnimatedTextIconMenu jQuery图片BubblerifficImageGallery jQuery图片上下文滑动特效 jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 jQuery图片特效404 jQuery图片特效CustomAnimationBanner jQuery图片特效FullPageImageGallery jQuery图片特效image Scroller图片滚动 jQuery图片特效ImageWall图片墙 jQuery图片特效interactive_picture jQuery图片特效jquery-twitter-ticker jQuery图片特效LatestPostSlider jQuery图片特效note-app jQuery图片特效panning-slideshow jQuery图片特效photo-shoot-css-jquery jQuery图片特效randomizer jQuery图片特效rotating-slideshow jQuery图片特效select-jquery jQuery图片特效Site jQuery图片特效SliderGallery jQuery图片特效smooth-rotatable-images-css3-jquery jQuery图片特效tz-todoapp jQuery图片特效youtube-player jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide jQuery大气banner带时间线自动播放的焦点图轮番切换代码 jquery定时自动切换banner广告图片动画插件示例 jquery实现LightBox图片点击放大效果的图片盒子插件 jQuery实现slider图片滚动,单个滚动,成组滚动示例 jQuery实现产品图片循坏旋转的代码 jQuery实现动态图文分组排序切换源码 jQuery实现图片3D旋转特效插件 v1.1版本下载 jQuery实现图片3D立体感的前后轮番展示特效 jQuery实现图片取景器仿相机拍照功能的插件photoShoot jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 jquery实现图片可拖动展示的实例下载 jQuery实现拖动滚动条的缩略图排列插件下载 jQuery实现焦点图片Flash自动平滑渐变效果 jQuery实现鼠标移到链接提示显示图片功能插件 jquery实现鼠标经过链接放大图片特效代码 jquery实用Banner大图片横向切换效果 jquery实用产品图片展示动感切换效果源码 jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 jquery异步加载图片的插件jqGalScroll下载 jquery微型相册插件Micro Image Gallery下载 jQuery把图片放大及变亮特效插件下载 jquery拖动滚动条控制图片滚动图片放大特效的示例 jquery旋转式图片切换并带图片放大功能 jQuery漂亮网页右上角双层撕角广告代码 jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 jQuery演示Ajax加载并显示图片的相片画廊实例 jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) jquery版自动滚动图片动画特效插件
以下是一个简单的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、付费专栏及课程。

余额充值