使用lightbox 点击表格的图片放大，放大后可以旋转滚动鼠标放大缩小

本文链接：https://blog.youkuaiyun.com/Null_Bugs/article/details/98875484

本文介绍如何在JavaScript中应用lightbox功能，当点击表格内的图片时，能够实现图片放大并支持旋转。通过鼠标滚轮，用户可以进一步放大或缩小图片，提升查看细节的体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用

lightbox.css

lightbox.js

在js中搜索

Lightbox.prototype.build = function() {

在这个方法后面添加下面的内容

// 图片滚轮缩放
    this.img = this.$container.find('.lb-image');
    this.label = this.$lightbox.find('.lb-dataContainer');
    $([this.$overlay[0],this.$lightbox[0]]).bind("mousewheel", function(e){
      var flag= e.originalEvent.wheelDelta < 0;
      var imgH = self.img.height();
      var imgW = self.img.width();
      var nw = Math.round(20*imgW/imgH);
      var ctH = self.$outerContainer.height();
      var ctW = self.$outerContainer.width();
      var layH = self.$overlay.height()-20;
      var layW = self.$overlay.width()-20;
      // 向下
      if(flag && imgH>20 && imgW>20) {
        self.img.css('height', imgH - 20);
        self.img.css('width', imgW - nw);
        self.$outerContainer.css('height', ctH - 20);
        self.$outerContainer.css('width', ctW - nw);
        if(ctW-nw > 240){
          self.label.css('width', ctW - nw);
        }
      } else if(!flag && imgH<layH && imgW<layW) {
        self.img.css('height', imgH + 20);
        self.img.css('width', imgW + nw);
        self.$outerContainer.css('height', ctH + 20);
        self.$outerContainer.css('width', ctW + nw);
        self.label.css('width', ctW + nw);
      }
      e.stopPropagation();
      return false;
    });

function imgFormatter(value, row) {
        if(null == value){
            return "";
        }
        return '<a href = "' + value+  '" data-lightbox="example-set1"><img src="' + value + '" alt="" width="50" height="50"  ></a>';
    }