這篇文章主要為大家展示了“vue如何實(shí)現(xiàn)放大鏡效果”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue如何實(shí)現(xiàn)放大鏡效果”這篇文章吧。
組件使用less,請確保已安裝loader
本組件為放大鏡組件,傳參列表為:
?width: 必傳,設(shè)置放大鏡的寬高(正方形),放大區(qū)域等同,放大倍數(shù)為2倍
?picList:必傳,傳入圖片列表
使用示例:
script:
import mirror from 'xx/mirror' export default { components:{ mirror }, data(){ return { width:300, picList:[ xxxxxx, xxxxxx ], } } }
html:
<mirror :width="width" :picList="picList" />
詳細(xì)代碼:
HTML:
<template> <div class="mirror"> <div class="wrap" : > <div ref="truth" : @mousemove="move" @mouseenter="showMagnify" @mouseleave="hideMagnify"> <div class="mask" ref="mask" v-show = "showMask" :></div> <img :src="picList[picIndex]" draggable="false"/> </div> <div class="virtual" ref="virtual" v-if = "isShowVirtual" : > <div class="big" ref = "bigPic" : > </div> </div> </div> <ul class="picList" :> <li v-for = "(item,index) in picList" :class="{now:index==picIndex}" :data-index="index" :key ="item" @mouseenter="changeIndex"> <img :src ="item" /> </li> </ul> </div> </template>
JS:
export default { props:['width','picList'],//寬度是用來給放大鏡的 data(){ return { picIndex:0, isShowVirtual:false, showMask:false, maskPosition:{}, percent:{}, } }, methods:{ computedOffset(obj,prop){ //計算元素到body的絕對位置 if(obj==document.body || obj.offsetParent == document.body){ return parseInt(obj[prop]) } return parseInt(obj[prop])+this.computedOffset(obj.offsetParent,prop) }, changeIndex(e){ this.picIndex = e.target.dataset.index }, showMagnify(e){ this.showMask=true; this.isShowVirtual = true; }, hideMagnify(){ this.isShowVirtual=false; this.showMask=false }, computePosition(e){ let x = e.pageX,y = e.pageY; let mask = this.$refs.mask; let truth = this.$refs.truth; let virtual = this.$refs.virtual; let bigPic = this.$refs.bigPic; x = x-this.computedOffset(truth,'offsetLeft') -mask.offsetWidth/2; y = y-this.computedOffset(truth,'offsetTop')- mask.offsetHeight/2; if(x<=0) { x=0 }else if(x>truth.offsetWidth - mask.offsetWidth){ x = truth.offsetWidth/2 } if(y<=0){ y=0; } else if(y>truth.offsetHeight - mask.offsetHeight){ y = truth.offsetHeight/2 } this.maskPosition = { x,y } //計算比例 this.percent={ x:-x/(truth.offsetWidth-mask.offsetWidth)*(bigPic.offsetWidth - virtual.offsetWidth)+'px', y:-y/(truth.offsetHeight-mask.offsetHeight)*(bigPic.offsetHeight - virtual.offsetHeight)+'px' } }, move(e){ this.computePosition(e) } } }
CSS:
<style lang="less" scoped> .now{ border-color: cyan !important; } .mirror{ width:100%; .wrap{ user-select: none; margin-bottom: 20px; position: relative; background-color: #fff; border:1px solid gray; box-sizing:border-box; cursor: pointer; img{ width:100%; height:100%; } .virtual{ overflow:hidden; width:100%; height:100%; position:absolute; left:calc(100% + 10px); top:0; background-repeat:no-repeat } .mask{ position: absolute; background-image: url('https://img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png'); background-repeat:repeat; cursor: move; } } .picList{ width:100%; display: flex; justify-content: space-between; flex-wrap:wrap; li{ width:50px; height:50px; margin:5px; border:1px solid transparent; box-sizing: border-box; img{ width:100%; height:100% } } } .picList:after{ content:""; flex:auto; } } </style>
以上是“vue如何實(shí)現(xiàn)放大鏡效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)站欄目:vue如何實(shí)現(xiàn)放大鏡效果-創(chuàng)新互聯(lián)
文章出自:http://www.rwnh.cn/article36/esipg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、網(wǎng)頁設(shè)計公司、做網(wǎng)站、小程序開發(fā)、外貿(mào)建站、網(wǎng)站營銷
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容