原生实现图片点击放大，点击消失

最新推荐文章于 2023-04-06 14:26:06 发布

VIP文章 Delicia_Lani

最新推荐文章于 2023-04-06 14:26:06 发布

阅读量449

点赞数

分类专栏： html WEB前端开发工程师文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_29918313/article/details/125301419

版权

<div>
    <a @click="getLargeImage()" alt="" class="pic">放大图片</a>
  </div>
  <div id="outerDiv" class="outer-div">
    <div id="innerDiv" class="inner-div">
      <img id="bigImg" class="big-img" src="" />
    </div>
  </div>

getLageImage () {
       let _this = $(this) // 将当前的pimg元素作为_this传入函数
       this.imgShow('#outerDiv', '#innerDiv', '#bigImg', _this)
     },
imgShow (outerDiv, innerDiv, bigImg, _this) {
       var src = require('imageName.png')
       $(bigImg).attr('src', src)
       this.downloadTest(bigImg, innerDiv, outerDiv)
       $(outerDiv).click(function () {
         $(this).fadeOut('fast')
       })
     },
downloadTest (bigImg, innerDiv, outerDiv) {