vue實(shí)現(xiàn)tab切換的放大鏡效果
本文實(shí)例為大家分享了vue實(shí)現(xiàn)tab切換的放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下
廢話不多說(shuō)先看效果圖
1.我這里并沒(méi)有加遮罩層，如有需要請(qǐng)自行加上
2.圖片建議使用4k高清圖片，不然放大后模糊，影響觀看心情
3.不用拘泥于樣式，關(guān)注實(shí)現(xiàn)原理即可
4.可能我的方法并不簡(jiǎn)便，但是也是一種思路，請(qǐng)大家參考
實(shí)現(xiàn)原理第一肯定需要vue.js
第二需要兩張圖片
左邊為現(xiàn)實(shí)圖片，右邊放大后的效果圖其實(shí)一直存在，只不過(guò)鼠標(biāo)移入現(xiàn)實(shí)，鼠標(biāo)移出消失
放大的圖片并不是真正的放大，而是在img標(biāo)簽外套了一個(gè)父元素，將img標(biāo)簽的寬高都設(shè)置為百分之一百以上，至于放大多少你就設(shè)置多少，然后給父元素設(shè)置超出隱藏，再設(shè)置display：none讓元素隱藏，等到鼠標(biāo)移入左邊大圖的時(shí)候再顯示
至于如何讓鼠標(biāo)移動(dòng)放大的圖片也會(huì)移動(dòng)就是要獲取鼠標(biāo)在元素上移動(dòng)的位置，用鼠標(biāo)移動(dòng)事件觸發(fā)，然后給放大后的圖片設(shè)置相對(duì)定位然后將鼠標(biāo)的移動(dòng)的X軸位置和Y軸位置分別賦值給大圖的left和top
-----------------------------------萬(wàn)能分割線----------------------------------------
簡(jiǎn)單來(lái)說(shuō)，放大后的圖片本來(lái)就存在只不過(guò)設(shè)置為隱藏，鼠標(biāo)移入的后再顯示，然后獲取鼠標(biāo)移動(dòng)的位置賦值給大圖的相對(duì)定位值，這就是放大鏡的實(shí)現(xiàn)原理
tab切換就更簡(jiǎn)單了
需要用到vue的v-show來(lái)實(shí)現(xiàn)在data中創(chuàng)建一個(gè)數(shù)組將圖片地址存在數(shù)組中，通過(guò)v-for將圖片地址遍歷到img標(biāo)簽中在data中創(chuàng)建一個(gè)nowindex，將圖片索引賦值給nowindex通過(guò)v-show=“nowindex == index“來(lái)控制圖片顯示隱藏
下面就是代碼
<!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='http://www.4tl426be.cn/bcjs/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 @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' @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',//相對(duì)定位的值positions: { top: 0, left: 0} }, methods: {change(index) { //圖片的切換 this.nowindex = index;},over() { //通過(guò)更改類名實(shí)現(xiàn)顯示隱藏 this.blocks = 'block'},out() { this.blocks = 'fdj'},move(e) { //將鼠標(biāo)移動(dòng)位置賦值給圖片相對(duì)定位的值，實(shí)現(xiàn)鼠標(biāo)移動(dòng)圖片移動(dòng) this.positions.top = (e.offsetY * -7.9) + 'px'; this.positions.left = (e.offsetX * -6) + 'px';} },}) </script></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 解決vue頁(yè)面刷新，數(shù)據(jù)丟失的問(wèn)題2. python 讀txt文件,按‘,’分割每行數(shù)據(jù)操作3. python logging.info在終端沒(méi)輸出的解決4. vue路由分文件拆分管理詳解5. vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作6. Python 忽略文件名編碼的方法7. SpringBoot使用Captcha生成驗(yàn)證碼8. android studio實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器（無(wú)bug）9. android 控件同時(shí)監(jiān)聽單擊和雙擊實(shí)例10. 詳解android adb常見用法
網(wǎng)公網(wǎng)安備