vue實現tab切換的放大鏡效果
阿新 • • 發佈：2021-08-19
本文例項為大家分享了實現tab切換的放大鏡效果的具體程式碼，供大家參考，具體內容如下
廢話不多說先看效果圖
1.我這裡並沒有加遮罩層，如有需要請自行加上
2.圖片建議使用4k高清圖片，不然放大後模糊，影響觀看心情
3.不用拘泥於樣式，關注實現原理即可
4.可能我的方法並不簡便，但是也是一種思路，請大家參考
實現原理
第一肯定需要vue.
第二需要兩張圖片
左邊為現實圖www.cppcns.com片，右邊放大後的效果圖其實一直存在，只不過滑鼠移入現實，滑鼠移出消失
放大的圖片並不是真正的放大，而是在img標籤外套了一個父元素，將img標籤的寬高都設定為百分之一百以上，至於放大多少你就設定多少，然後給父元素設定超出隱藏，再設定display：none讓元素隱藏，等到滑鼠移入左邊大圖的時候再顯示
至於如何讓滑鼠移動放大的圖http://www.cppcns.com片也會移動就是要獲取滑鼠在元素上移動的位置，用滑鼠移動事件觸發，然後給放大後的圖片設定相對定位然後將滑鼠的移動的X軸位置和Y軸位置分別賦值給大圖的left和top
-----------------------------------萬能分割線----------------------------------------
簡單來說，放大後的圖片本來就存在只不過設定為隱藏，滑鼠移入的後再顯示，然後獲取滑鼠移動的位置賦值給大圖的相對定位值，這就是放大鏡的實現原理
tab切換就更簡單了
需要用到vue的v-show來實現
在data中建立一個數組將圖片地址存在陣列中，通過v-for將圖片地址遍歷到img標籤中
下面就是程式碼
<!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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。