一行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