vue實(shí)現(xiàn)商品詳情頁(yè)放大鏡功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)商品詳情頁(yè)放大鏡的具體代碼,供大家參考,具體內(nèi)容如下
templates中內(nèi)容
<div class="productLeft"> <!-- 左側(cè)中圖 --> <div class="mdImg"> <img :src="require('../assets/imgs/details/'+mdImgUrl)" alt=""> </div> <!-- 遮罩層 --> <div v-show="isShow" class="marks" :style="{top:top+'px',left:left+'px'}"></ div> <!-- 遮罩層 玻璃板 superMarks--> <div @mouseenter="enter" @mouseleave="leave" @mousemove="marks" class="superMarks" ></div> <!--左側(cè)小圖 --> <div class="smImg" > <!--左按鈕 --> <div @click="prev" class="button-prev"> <img src="../assets/icon/prev.png" > </div> <div class="smImgUl"> <ul :style="{'margin-left':marginLeft+'px'}"> <li @mouseenter="enterLi(index)" v-for="(item,index) of list" :key="index"> < img :src="require('../assets/imgs/details/'+item.sm)" alt=""> </li> </ul> </div> <!-- 右按鈕 --> <div @click="next" class="button-next"> <img src="../assets/icon/next.png" > </div> </div> <!-- 左側(cè)大圖 --> <div v-show="isShow" class="lgImg"> <img :src="require('../assets/imgs/details/'+lgImgUrl)" alt="" :style="{top:topLgImg+'px',left:leftLgImg+'px'}"> </ div> </div>
js:
< script> import headerT from "./common/headerT.vue" import header from "./common/Header.vue" export default { data() { return { list:[{"sm":"s1.png","md":"s1.png","lg":"s1.png"}, {"sm":"s2.png","md":"s2.png","lg":"s2.png"}, {"sm":"s3.png","md":"s3.png","lg":"s3.png"}, {"sm":"s4.png","md":"s4.png","lg":"s4.png"}, {"sm":"s5.png","md":"s5.png","lg":"s5.png"}, {"sm":"s6.png","md":"s6.png","lg":"s6.png"}, {"sm":"s7.png","md":"s7.png","lg":"s7.png"}, {"sm":"s8.png","md":"s8.png","lg":"s8.png"}], mdImgUrl:"s1.png", lgImgUrl:"s1.png", ulIndex:0,//向左移動(dòng)幾個(gè)li marginLeft:0, //向左向右移動(dòng)的距離 isShow:false, //控制遮罩層marks和大圖片是否顯示" left:0, //marks左移位置 top:0, //marks下移位置 leftLgImg:0, //大圖lgImg移動(dòng)的位置 topLgImg:0 //大圖lgImg移動(dòng)的位置 } }, methods: { //鼠標(biāo)進(jìn)入小圖時(shí)事件,顯示對(duì)應(yīng)的中圖 enterLi(e){ //e是對(duì)應(yīng)的下標(biāo) //console.log(e); this.mdImgUrl=this.list[e].md; this.lgImgUrl=this.list[e].lg; }, //點(diǎn)擊左右按鈕事件ul的li移動(dòng),每個(gè)li寬74px,ul寬370顯示5個(gè)li prev(){ //向左移動(dòng)- if(this.ulIndex>-(this.list.length-5)){ this.ulIndex--; this.marginLeft=this.ulIndex*74; //console.log(this.ulIndex) } }, next(){ //向右移動(dòng)++ if(this.ulIndex<0){ this.ulIndex++; this.marginLeft=this.ulIndex*74; //console.log(this.ulIndex) } }, //鼠標(biāo)進(jìn)入和離開(kāi) enter(){ this.isShow=true }, leave(){ this.isShow=false }, //遮罩層放大鏡 marks(e){ //console.log(e.offsetX,e.offsetY) //鼠標(biāo)移入時(shí)的位置· var marksWidth=200;//marks的寬 var marksHeight=200;//marks的高 this.left=e.offsetX-marksWidth/2; this.top=e.offsetY-marksHeight/2; //console.log(this.left,this.top) if(this.left<0){ this.left=0; }else if(this.left>250){ this.left=250; } if(this.top<0){ this.top=0; }else if(this.top>250){ this.top=250; } //console.log(this.left,this.top) //中圖片div寬高450,大圖片div寬高800 this.leftLgImg=-this.left*800/450; this.topLgImg=-this.top*800/450; } }, computed: { }, components:{ "headerone":headerT, "headertwo":header }, watch: { }, } </ script>
CSS:
<style scoped> .content{ width:1200px; margin:0 auto; } .content>.product{ display: flex; justify-content: space-between; } /* 左側(cè)大小圖樣式 */ .productLeft{ width:450px; position: relative; } /* 左側(cè)中圖 */ .mdImg,.mdImg>img{ width:450px; height:450px; } /*遮罩層superMarks */ .superMarks{ width:450px; height:450px; background-color:rgba(220, 220, 220, 0); position:absolute; top:0px; left:0px; } /* 遮罩層 */ .marks{ width:200px; height:200px; position:absolute; background-color:rgba(220, 220, 220, 0.5); /*top:0px; //內(nèi)聯(lián)設(shè)置了動(dòng)態(tài)的top,left left:0px;*/ } /* 左側(cè)小圖 */ .smImg{ display:flex; align-items: center; justify-content: space-between; overflow:hidden; } .smImgUl{ overflow:hidden; width:370px; } .smImg ul{ display: flex; width:370px; margin:0; padding:0; } .smImg ul>li{ padding:0 3px; } .smImg img{ height:60px; margin:4px; } /* 左側(cè)隱藏大圖 */ .lgImg{ width:400px; height:400px; overflow: hidden; position:absolute; top:0px; left:450px; border:2px solid #aaa; background-color:#fff; } .lgImg img{ width:800px; height:800px; position:absolute; /*top:100px; left:100px;*/ } /* product右側(cè) */ .productRight{ width:700px; } /* 左右按鈕 */ .button-prev,.button-next{ width:35px; height:35px; line-height: 30px; border:1px solid #ddd; border-radius:50%; text-align:center; } .button-prev:hover,.button-next:hover{ background-color:#eee; } .button-prev>img,.button-next>img{ width:20px; height:20px; } </style>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)
文件上傳在很多項(xiàng)目中都用的到,如果是幾M的很快就傳送完畢,如果是大文件呢?本文就介紹了Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn),感興趣的可以了解一下2021-06-06vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)
最近在開(kāi)發(fā)移動(dòng)端項(xiàng)目,通過(guò)向左滑動(dòng)出現(xiàn)刪除按鈕,點(diǎn)擊即可刪除,怎么實(shí)現(xiàn)這個(gè)功能呢,接下來(lái)小編給大家?guī)?lái)實(shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能,感興趣的朋友跟隨小編一起看看吧2021-05-05Vue3中關(guān)于ref和reactive的區(qū)別分析
這篇文章主要介紹了vue3關(guān)于ref和reactive的區(qū)別分析,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-06-06vue中使用element-ui進(jìn)行表單驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了vue中使用element-ui進(jìn)行表單驗(yàn)證的實(shí)例代碼,本文給大家分享實(shí)現(xiàn)思路,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06Vue computed 計(jì)算屬性代碼實(shí)例
在本篇文章里小編給大家分享的是關(guān)于Vue computed 計(jì)算屬性代碼實(shí)例,需要的朋友們可以參考下。2020-04-04vue項(xiàng)目如何引入element?ui、iview和echarts
這篇文章主要介紹了vue項(xiàng)目如何引入element?ui、iview和echarts,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05Vue Cli與BootStrap結(jié)合實(shí)現(xiàn)表格分頁(yè)功能
這篇文章主要介紹了Vue Cli與BootStrap結(jié)合實(shí)現(xiàn)表格分頁(yè)功能,需要的朋友可以參考下2017-08-08