js点击图片放大,再次点击原图
2019-04-25 本文已影响0人
queue
<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>