這篇文章將為大家詳細講解有關vue如何實現tab切換的放大鏡效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
效果圖
1.我這里并沒有加遮罩層，如有需要請自行加上
2.圖片建議使用4k高清圖片，不然放大后模糊，影響觀看心情
3.不用拘泥于樣式，關注實現原理即可
4.可能我的方法并不簡便，但是也是一種思路，請大家參考
第一肯定需要vue.js
第二需要兩張圖片
左邊為現實圖片，右邊放大后的效果圖其實一直存在，只不過鼠標移入現實，鼠標移出消失
放大的圖片并不是真正的放大，而是在img標簽外套了一個父元素，將img標簽的寬高都設置為百分之一百以上，至于放大多少你就設置多少，然后給父元素設置超出隱藏，再設置display：none讓元素隱藏，等到鼠標移入左邊大圖的時候再顯示
至于如何讓鼠標移動放大的圖片也會移動就是要獲取鼠標在元素上移動的位置，用鼠標移動事件觸發，然后給放大后的圖片設置相對定位然后將鼠標的移動的X軸位置和Y軸位置分別賦值給大圖的left和top
-----------------------------------萬能分割線----------------------------------------
簡單來說，放大后的圖片本來就存在只不過設置為隱藏，鼠標移入的后再顯示，然后獲取鼠標移動的位置賦值給大圖的相對定位值，這就是放大鏡的實現原理
tab切換就更簡單了
需要用到vue的v-show來實現
在data中創建一個數組將圖片地址存在數組中，通過v-for將圖片地址遍歷到img標簽中
在data中創建一個nowindex，將圖片索引賦值給nowindex通過v-show=“nowindex == index“來控制圖片顯示隱藏
下面就是代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue/vue.js"></script>
<style>
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
#app {
height: 245px;
width: 556px;
/* border: 3px solid; */
position: relative;
margin: 200px auto;
box-sizing: border-box;
}
.content {
height: 150px;
width: 250px;
border-bottom: 5px solid white;
}
.imgs {
height: 90px;
width: 248px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.imger {
height: 99%;
width: 49.6%;
}
.content>img {
height: 100%;
width: 100%;
}
.active {
box-shadow: 0px 8px 8px black;
opacity: 0.7;
}
.fdj {
display: none;
}
.block {
height: 240px;
width: 300px;
position: absolute;
top: 0px;
right: -10px;
overflow: hidden;
z-index: 100;
border-radius: 8px;
}
.block>img {
height: 600%;
width: 600%;
position: relative;
}
</style>
</head>
<body>
<div id="app">
<div class="content" @mouseover="over" @mouseout="out" @mousemove='move($event)'>
<img :src=item v-for="(item,index) in url" v-show='index == nowindex'>
</div>
<div class="imgs">
<img :src=item v-for="(item,index) in url" class="imger" @click="change(index)" :class="{active:index == nowindex}">
</div>
<div :class="blocks">
<img :src=item v-for="(item,index) in url" v-show='index == nowindex' :style='positions'>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
//圖片地址
url: ['./img/11.jpg', "./img/9.jpg"],
nowindex: 0,
blocks: "fdj",
//相對定位的值
positions: {
top: 0,
left: 0
}
},
methods: {
change(index) {
//圖片的切換
this.nowindex = index;
},
over() {
//通過更改類名實現顯示隱藏
this.blocks = "block"
},
out() {
this.blocks = "fdj"
},
move(e) {
//將鼠標移動位置賦值給圖片相對定位的值，實現鼠標移動圖片移動
this.positions.top = (e.offsetY * -7.9) + "px";
this.positions.left = (e.offsetX * -6) + "px";
}
},
})
</script>
</body>
</html>關于“vue如何實現tab切換的放大鏡效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
