功能问题：如何实现图片放大镜功能？

最新推荐文章于 2024-05-13 02:16:46 发布

程序员大澈

最新推荐文章于 2024-05-13 02:16:46 发布

阅读量1.2k

点赞数 35

分类专栏：功能问题合集文章标签：前端 vue.js javascript css html

本文链接：https://blog.csdn.net/m0_74802419/article/details/135650169

版权

功能问题合集专栏收录该内容

53 篇文章 5 订阅

订阅专栏

本文介绍了如何在电商网站中实现图片放大镜功能，通过动态设置偏移量和Canvas技术，并提供了两种方式的代码示例。同时讨论了在不同项目中的选择和实现时的注意事项。

摘要由CSDN通过智能技术生成

大家好，我是大澈！

本文约2900+字，整篇阅读大约需要4分钟。

感谢关注微信公众号：“程序员大澈”，免费领取"面试礼包"一份，然后免费加入问答群，从此让解决问题的你不再孤单！

1. 需求分析

平常我们一般都是在手机淘宝上购物，不知道大家有没有体验过PC端淘宝，里面有很多好玩的设计。

比如我们今天要实现的功能：图片放大镜，这是一个在电商网站应用非常广的设计。

鼠标移入左侧缩略图时，小盒子和右边大图显示，并且小盒子跟随鼠标移动，右侧大图出现放大效果。

再梳理一下，图片放大镜功能设计有如下几个优点：

提供更好的用户体验：通过放大镜功能，用户可以在不离开当前页面或进一步导航的情况下，更详细地查看图像的细节。
提供互动性：放大镜功能增加了用户与图像的互动性。通过鼠标悬停或触摸屏幕，用户可以控制放大镜的位置，并实时查看所选区域的放大效果。
增强响应式设计：无论用户使用大屏幕设备还是小屏幕设备，他们都能够在需要时放大图像，轻松查看细节。

图片放大镜功能的实际应用场景有很多，如电子商务、艺术设计展示、图片库等。

要实现图片放大镜功能，一般有两种方式：一种是利用原生JS动态设置偏移量，一种是利用原生JS的Canvas动态截取。

当然，实现方式一定不仅仅只有这几种，还有很多可以尝试的其它办法，这里期待朋友们补充指教吧！

下面我们一起来看看，上述两种原生JS的具体实现。

2. 功能实现

先简单聊聊这两种原生JS方式的实现原理，再附上可直接使用的源码，最后置身于真实项目中，对图片放大镜功能的实现做一下小结。

2.1 方式一动态设置偏移量

此方式中，左侧缩略图和右侧大图插入的是同一个图片，不过原图窗口的图片要适当缩小，放大窗口图片保持原大小，超出部分设置隐藏。

先实现小盒子跟着鼠标移动的功能，且小盒子不能移出边界。

再实现右侧大图随着小盒子的移动实现自身移动，且两者移动方向总是相反的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>放大镜</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  .container{
   width: 400px;
   height: 250px;
   position: relative;
   left: 250px;
   top: 150px;
  }
  .bigBox{
   width: 500px;
   height: 500px;
   border-radius: 50%;
   position: absolute;
   left: 430px;
   border: 1px solid #ccc;
   overflow: hidden;
   display: none;
  }
  .smallBox{
   position: absolute;
   border: 1px solid #ccc;
   font-size: 0;
  }
  .mask{
   width: 100px;
   height: 100px;
   cursor: move;
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(255,255,0,0.4);
   display: none;
  }
  #bigPic{
   position: absolute;
  }
 </style>
</head>

<body>
 <div class="container" id="box">
  <!-- 左侧缩略图 -->
  <div class="smallBox">
   <img src="./01.png" alt="" width="400px">
   <!-- 小盒子 -->
   <div class="mask"></div>
  </div>
  <!-- 右侧大图 -->
  <div class="bigBox">
   <img src="./01.png" alt="" id="bigPic">
  </div>
 </div>
</body>

<script>
window.onload = function(){
    var smallBox = document.getElementsByClassName('smallBox')[0];
    var bigBox = document.getElementsByClassName('bigBox')[0];
    var mask = document.getElementsByClassName('mask')[0];
    var box = document.getElementById('box');
    var bigPic = document.getElementById('bigPic');
    smallBox.onmouseover = function(){
        bigBox.style.display = "block";
        mask.style.display = "block";
    }
    smallBox.onmouseout = function(){
        bigBox.style.display = "none";
        mask.style.display = "none";
    }
    smallBox.onmousemove = function(event){
        //pageX,pageY
        //处理兼容性和滚动条
        var event = event || window.event;
        var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
          var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var pageX = event.pageX || event.clientX + scollLeft;
        var pageY = event.pageY || event.clientY + scollTop;
        var targetX = pageX - box.offsetLeft - mask.offsetWidth/2;
        var targetY = pageY - box.offsetTop - mask.offsetHeight/2;
        //左边界
        if(targetX<0){
            targetX = 0;
        }
        //上边界
        if(targetY<0){
            targetY = 0;
        }
        //右边界
        if(targetX>smallBox.offsetWidth - mask.offsetWidth){
            targetX = smallBox.offsetWidth - mask.offsetWidth
        }
        //下边界
        if(targetY>smallBox.offsetHeight - mask.offsetHeight){
            targetY = smallBox.offsetHeight - mask.offsetHeight
        }
        //设置小盒子的左偏移和上偏移
        mask.style.left = targetX + 'px';
        mask.style.top = targetY + 'px';
        var smallMoveX = smallBox.offsetWidth - mask.offsetWidth;
        var bigMoveX = bigPic.offsetWidth - bigBox.offsetWidth;
        var smallMoveY = smallBox.offsetHeight - mask.offsetHeight;
        var bigMoveY = bigPic.offsetHeight - bigBox.offsetHeight;
        //设置右边放大部分跟随鼠标移动
        var rateX = bigMoveX/smallMoveX; 
        var rateY = bigMoveY/smallMoveY;
        bigPic.style.left = -rateX*targetX+'px';
        bigPic.style.top = -rateY*targetY+'px'; 
    }
}
</script>
</html>

2.2 方式二 Canvas动态截取

此方式中，页面上总共放三块画布。一块放左侧缩略图，一块放小盒子，一块放右侧大图。

先实现小盒子跟随鼠标在左侧缩略图上移动。

再把小盒子内的图片截取出来，按比例放到右侧大图的画布上，从而实现放大效果。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>放大镜</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  .container{
   width: 300px;
   height: 300px;
   border: 1px solid #ccc;
   position: relative;
  }
  canvas{
   border: 1px solid #ccc;
  }
  #big-canvas{
   position: absolute;
   left: 320px;
   top: 100px;
   display: none;
  }
  #small-canvas{
   position: absolute;
   opacity: 0.5;
   left: 0;
   top: 0;
   display: none;
  }
 </style>
</head>

<body>
 <div class="container">
  <!-- 左侧缩略图 -->
  <canvas id="canvas" width="300px" height="300px"></canvas>
  <!-- 右侧大图 -->
  <canvas id="big-canvas" width="500px" height="500px"></canvas>
  <!-- 小盒子 -->
  <canvas id="small-canvas" width="80px" height="80px"></canvas>
 </div>
</body>

<script>
window.onload = function(){
    var container = document.getElementsByClassName('container')[0];
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var bigCanvas = document.getElementById('big-canvas');
    var bigContext = bigCanvas.getContext('2d');
    var smallCanvas = document.getElementById('small-canvas');
    var smallContext = smallCanvas.getContext('2d');

    //左侧缩略图
    var img = new Image();
    img.src = './01.png';
    img.onload = function(){
        context.drawImage(img,0,0,300,300);
    }

    //小盒子
    var imgbd = new Image();
    imgbd.src = '';
    imgbd.onload = function(){
        smallContext.drawImage(imgbd,0,0,80,80);
    }

    container.onmousemove = function(event){
        //鼠标移进小盒子和右侧大图都显示
        bigCanvas.style.display = 'block';
        smallCanvas.style.display = 'block';
        // x是开始裁剪图片的位置的横坐标  y是开始裁剪图片的位置的纵坐标
        var x = event.pageX - container.offsetLeft - smallCanvas.offsetWidth/2;
        var y = event.pageY - container.offsetTop - smallCanvas.offsetHeight/2;
        //判断边界
        if (x<0) {
            x = 0;
        }
        if (x> canvas.offsetWidth - smallCanvas.offsetWidth) {
            x = canvas.offsetWidth - smallCanvas.offsetWidth;
        }
        if (y<0) {
            y = 0;
        }
        if (y> canvas.offsetHeight - smallCanvas.offsetHeight) {
            y = canvas.offsetHeight - smallCanvas.offsetHeight;
        }
        // 设置小盒子的位置
        smallCanvas.style.left = x + 'px';
        smallCanvas.style.top = y + 'px';

        // 参数：图像对象，开始剪切的 x 坐标位置，开始剪切的 y坐标位置，被剪切图像的宽度，被剪切图像的高度，绘制位置的起始x坐标，起始y坐标，绘制图像的宽，高
        bigContext.drawImage(canvas,x,y,80,80,0,0,500,500);

    }
    //鼠标移出小盒子和右侧大图都隐藏
    container.onmouseleave = function(){
        bigCanvas.style.display = 'none';
        smallCanvas.style.display = 'none';
    }
}
</script>
</html>