vue實現商品詳情頁放大鏡功能
更新時間:2021年08月18日 14:31:40 作者:鏡花幻影空意搖
這篇文章主要為大家詳細介紹了vue實現商品詳情頁放大鏡功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現商品詳情頁放大鏡的具體代碼,供大家參考,具體內容如下
templates中內容
<div class="productLeft"> <!-- 左側中圖 --> <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> <!--左側小圖 --> <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> <!-- 左側大圖 --> <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,//向左移動幾個li marginLeft:0, //向左向右移動的距離 isShow:false, //控制遮罩層marks和大圖片是否顯示" left:0, //marks左移位置 top:0, //marks下移位置 leftLgImg:0, //大圖lgImg移動的位置 topLgImg:0 //大圖lgImg移動的位置 } }, methods: { //鼠標進入小圖時事件,顯示對應的中圖 enterLi(e){ //e是對應的下標 //console.log(e); this.mdImgUrl=this.list[e].md; this.lgImgUrl=this.list[e].lg; }, //點擊左右按鈕事件ul的li移動,每個li寬74px,ul寬370顯示5個li prev(){ //向左移動- if(this.ulIndex>-(this.list.length-5)){ this.ulIndex--; this.marginLeft=this.ulIndex*74; //console.log(this.ulIndex) } }, next(){ //向右移動++ if(this.ulIndex<0){ this.ulIndex++; this.marginLeft=this.ulIndex*74; //console.log(this.ulIndex) } }, //鼠標進入和離開 enter(){ this.isShow=true }, leave(){ this.isShow=false }, //遮罩層放大鏡 marks(e){ //console.log(e.offsetX,e.offsetY) //鼠標移入時的位置· 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; } /* 左側大小圖樣式 */ .productLeft{ width:450px; position: relative; } /* 左側中圖 */ .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; //內聯設置了動態(tài)的top,left left:0px;*/ } /* 左側小圖 */ .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; } /* 左側隱藏大圖 */ .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右側 */ .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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue項目如何引入element?ui、iview和echarts
這篇文章主要介紹了vue項目如何引入element?ui、iview和echarts,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09