北京通网站建设价格,江西建筑工程网,网业认证怎么认证,施工企业会计核算办法一行js代码搞定xue项目需要点击图片放大缩小#xff0c;其实主要用的是用到了vue:class的动态切换#xff0c;内容比较简单。一开始我把维护的需求想得太复杂了#xff0c;和测试小姐姐聊了一下才反应过来。
两个月不到跟了四个项目#xff0c;现在是维护改bug阶段#x…一行js代码搞定xue项目需要点击图片放大缩小其实主要用的是用到了vue:class的动态切换内容比较简单。一开始我把维护的需求想得太复杂了和测试小姐姐聊了一下才反应过来。
两个月不到跟了四个项目现在是维护改bug阶段一直加班加的感觉整个人已经不是小仙女了是黄脸婆系列~话不多说上代码 !DOCTYPE html
html langen
head
meta charsetUTF-8
title图片点击放大缩小/title
style
div, ul, li, span, img {
margin: 0;
padding: 0;
display: flex;
box-sizing: border-box;
}
.vueBox{
text-align: center;
margin-left: 300px;
position: relative;
}
img {
transform: scale(1); /*图片原始大小1倍*/
transition: all ease 0.5s; } /*图片放大所用时间*/
img.active {
transform: scale(3); /*图片需要放大3倍*/
position: absolute; /*是相对于前面的容器定位的此处要放大的图片不能使用positionrelative以及float否则会导致z-index无效*/
z-index: 100; }
/style
/head
body
div classvueBox
img :class{active:isChoose} srchttp://www.baidu.com/img/bd_logo.png stylewidth: 150px clickimgScc
/div
script typetext/javascript srcjs/vue.min.js/script
script typetext/javascript
const vm new Vue({
el: .vueBox,
data: {
isChoose:false
},
methods:{
imgScc:function () {
this.isChoose !this.isChoose
}
}
});
/script
/body
/html 正常大小效果 点击后放大2倍效果 当再次点击时会恢复到正常大小状态 关于z-index不起作用的文章推荐
https://blog.csdn.net/apple_01150525/article/details/76546367 更多专业前端知识请上
【猿2048】www.mk2048.com
