美文网首页
js点击图片放大,再次点击原图

js点击图片放大,再次点击原图

作者: queue | 来源:发表于2019-04-25 15:23 被阅读0次
<span v-for="(item,index) in list" :key="index">
          <img :src="item.url"  :class="{'active':isChoose===index}" style="width: 150px" @click="imgScc(index)">
        </span>

data() {
  return{
     isChoose:false,
  }
}
 methods: {
    imgScc(index) {
      this.isChoose = this.isChoose === index ? false : index
    },
}

<style>
  img {
  transform: scale(1); /*图片原始大小1倍*/
  transition: all ease 0.5s;
} /*图片放大所用时间*/

img.active {
  transform: scale(3); /*图片需要放大3倍*/
  position: absolute; /*是相对于前面的容器定位的,此处要放大的图片,不能使用position:relative;以及float,否则会导致z-index无效*/
  z-index: 100;
}
</style>

相关文章

网友评论

      本文标题:js点击图片放大,再次点击原图

      本文链接:https://www.haomeiwen.com/subject/umrzgqtx.html