点击图片，放大/缩小图片

joney_zy

于 2022-09-15 17:27:36 发布

阅读量242

点赞数

分类专栏： js webstrom angular 文章标签： servlet java 前端

本文链接：https://blog.youkuaiyun.com/HL_xzf/article/details/126875891

版权

js 同时被 3 个专栏收录

9 篇文章

订阅专栏

webstrom

6 篇文章

订阅专栏

angular

2 篇文章

订阅专栏

这篇博客介绍了如何在Angular应用中实现图片的预览和缩放功能。通过展示小图片代码、放大后的代码以及对应的CSS样式和JavaScript函数，详细阐述了图片从原始大小到全屏显示的过程。关键代码包括`showBigImg`和`hideBigImg`函数，用于控制图片的放大和缩小。同时，还提供了用于调整图片样式的CSS类。

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

小图片代码：

 <div class="row">
              <div class="col-lg-3"></div>
              <div class="col-lg-9">
                <div class="form-group" *ngIf="xqobj.wgzpUrl">
                  <div class="col-lg-12">
                    <span style="display: inline-block;margin-right: 20px;margin-bottom: 20px"
                          (click)="showBigImg(xqobj.wgzpUrl)">
                      <img [src]="xqobj.wgzpUrl" alt="设备标签" class="imgSize" style="cursor: -webkit-zoom-in;cursor: -moz-zoom-in;cursor: zoom-in;"/>
                    </span>
                  </div>
                </div>
              </div>
            </div>

放大后代码

 <div class="modal fad" id="imgModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel3">
      <div class="modal-dialog " role="document" >
        <div class="modal-content" >
          <div style="padding: 0px;">
            <img [src]="bigimgurl" (click)="hideBigImg()" alt="考生图片" style="cursor: -webkit-zoom-out;cursor: zoom-out;width: 100%;min-width: 598px" />
          </div>
        </div>
      </div>
    </div>

样式

  ".imgSize{width:100px;height:100px;}",
    "#imgModal .modal-dialog { position: absolute !important;left: 50% !important;top: 50%!important;transform: translate(-50%, -50%) !important;}",

函数

//详情图片放大
  showBigImg(url: string): void {
    console.log(url);
    this.bigimgurl = url;
    $("#imgModal").modal({
      keyboard: true,
      backdrop: "static"
    });
  }
  //详情图片缩小
  hideBigImg(): void {
    this.bigimgurl = "";
    $("#imgModal").modal('hide');
  }