vue项目 一行js代码搞定点击图片放大缩小
生活随笔
收集整理的這篇文章主要介紹了
vue项目 一行js代码搞定点击图片放大缩小
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一行js代碼搞定xue項目需要點擊圖片放大縮小，其實主要用的是用到了vue:class的動態切換，內容比較簡單。一開始我把維護的需求想得太復雜了，和測試小姐姐聊了一下才反應過來。
兩個月不到跟了四個項目，現在是維護改bug階段，一直加班加的感覺整個人已經不是小仙女了，是黃臉婆系列~話不多說，上代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-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; /*是相對于前面的容器定位的，此處要放大的圖片，不能使用position：relative；以及float，否則會導致z-index無效*/z-index: 100; } </style></head> <body><div class="vueBox"><img :class="{'active':isChoose}" src="http://www.baidu.com/img/bd_logo.png" style="width: 150px" @click="imgScc"> </div><script type="text/javascript" src="js/vue.min.js"></script> <script type="text/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
總結
以上是生活随笔為你收集整理的vue项目 一行js代码搞定点击图片放大缩小的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三方面搞定http协议之“状态码”
- 下一篇： 专访Vue作者尤雨溪：Vue CLI 3