溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue如何實(shí)現(xiàn)tab切換的放大鏡效果

發(fā)布時間：2021-08-22 15:15:52 來源：億速云 閱讀：237 作者：小新 欄目：開發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)vue如何實(shí)現(xiàn)tab切換的放大鏡效果，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

效果圖

vue如何實(shí)現(xiàn)tab切換的放大鏡效果

1.我這里并沒有加遮罩層，如有需要請自行加上

2.圖片建議使用4k高清圖片，不然放大后模糊，影響觀看心情

3.不用拘泥于樣式，關(guān)注實(shí)現(xiàn)原理即可

4.可能我的方法并不簡便，但是也是一種思路，請大家參考

實(shí)現(xiàn)原理

第一肯定需要vue.js

第二需要兩張圖片

左邊為現(xiàn)實(shí)圖片，右邊放大后的效果圖其實(shí)一直存在，只不過鼠標(biāo)移入現(xiàn)實(shí)，鼠標(biāo)移出消失

放大的圖片并不是真正的放大，而是在img標(biāo)簽外套了一個父元素，將img標(biāo)簽的寬高都設(shè)置為百分之一百以上，至于放大多少你就設(shè)置多少，然后給父元素設(shè)置超出隱藏，再設(shè)置display：none讓元素隱藏，等到鼠標(biāo)移入左邊大圖的時候再顯示

至于如何讓鼠標(biāo)移動放大的圖片也會移動就是要獲取鼠標(biāo)在元素上移動的位置，用鼠標(biāo)移動事件觸發(fā)，然后給放大后的圖片設(shè)置相對定位然后將鼠標(biāo)的移動的X軸位置和Y軸位置分別賦值給大圖的left和top

-----------------------------------萬能分割線----------------------------------------

簡單來說，放大后的圖片本來就存在只不過設(shè)置為隱藏，鼠標(biāo)移入的后再顯示，然后獲取鼠標(biāo)移動的位置賦值給大圖的相對定位值，這就是放大鏡的實(shí)現(xiàn)原理

tab切換就更簡單了

需要用到vue的v-show來實(shí)現(xiàn)
在data中創(chuàng)建一個數(shù)組將圖片地址存在數(shù)組中，通過v-for將圖片地址遍歷到img標(biāo)簽中
在data中創(chuàng)建一個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() {
                    //通過更改類名實(shí)現(xiàn)顯示隱藏
                    this.blocks = "block"
                },

                out() {
                    this.blocks = "fdj"
                },
                move(e) {
                    //將鼠標(biāo)移動位置賦值給圖片相對定位的值，實(shí)現(xiàn)鼠標(biāo)移動圖片移動
                    this.positions.top = (e.offsetY * -7.9) + "px";
                    this.positions.left = (e.offsetX * -6) + "px";
                }
            },

        })
    </script>
</body>

</html>

關(guān)于“vue如何實(shí)現(xiàn)tab切換的放大鏡效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手