好资源导航 » 文章资讯 » vue实现点击图片放大效果

vue实现点击图片放大效果

2023-09-26 10:47:06 61

本文实例为大家分享了vue点击图片放大展示的具体代码，供大家参考，具体内容如下

1.建立子组件,来实现图片方法功能:BigImg.vue




/*动画*/
.fade-enter-active,
.fade-leave-active{
transition:all.2slinear;
transform:translate3D(0,0,0);
}
.fade-enter,
.fade-leave-active{
transform:translate3D(100%,0,0);
}

/*bigimg*/
.img-view{
position:inherit;
width:100%;
height:100%;
}
/*遮罩层样式*/
.img-view.img-layer{
position:fixed;
z-index:999;
top:0;
left:0;
background:rgba(0,0,0,0.7);
width:100%;
height:100%;
overflow:hidden;
}
/*不限制图片大小，实现居中*/
.img-view.imgimg{
max-width:100%;
display:block;
position:absolute;
left:0;
right:0;
margin:auto;
z-index:1000;
}

2.在父类中使用子组件:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue实现点击图片放大效果

热门推荐

随机推荐