仿淘寶詳情頁圖片滑鼠移過去可對圖片放大顯示在右側
效果圖如下圖，此功能支持PC端與移動端
接下來進入代碼實作環節：
先準備兩張圖片，一張小圖片叫 '土味.jpg'，大小160*91；一張大圖片叫 ' 土味Big.jpg '，大小320*181，
大家看圖片名字是什么就知道我要干什么，大家都懂的，接下來素材準備好了，進入代碼環節：
html結構：
<div class="productLeft"> <!-- 左側中圖 --> <div class="mdImg"> <img :src="qall" alt=""> </div> <!-- 遮罩層 --> <div v-show="isShow" class="marks" :style="{top:top+'px',left:left+'px'}"></div> <!-- 遮罩層 玻璃板 superMarks --> <div v-if="isPC==false" @touchstart.prevent="enter" @touchend.prevent="leave" @touchmove.prevent="marks" @click.prevent="sub()" class="superMarks" ></div> <div v-if="isPC==true" @mouseenter="enter" @mouseleave="leave" @mousemove="marks" @click.prevent="sub()" class="superMarks" ></div> <div v-show="isShow" class="lgImg"> <img :src="qallBig" alt="" :style="{top:topLgImg+'px',left:leftLgImg+'px'}"> </div> </div>
js部分：
export default{ name : 'blog-header', data(){ return{ isPC:true, // 大圖片 qall: '../../static/image/土味.jpg', qallBig: '../../static/image/土味Big.jpg', isShow:false, //控制遮罩層marks和大圖片是否顯示" left:0, //marks左移位置 top:0, //marks下移位置 leftLgImg:0, //大圖lgImg移動的位置 topLgImg:0 //大圖lgImg移動的位置 } }, methods:{ //滑鼠進入和離開 enter(){ this.isShow=true; }, leave(){ this.isShow=false; }, //遮罩層放大鏡 marks(e){ var marksWidth=48;//marks的寬 var marksHeight=48;//marks的高 if(this.isPC==true){ //PC端 this.left=e.offsetX-marksWidth/2; this.top=e.offsetY-marksHeight/2; if(this.left<0){ this.left=0; }else if(this.left>160){ this.left=160; } if(this.top<0){ this.top=0; }else if(this.top>160){ this.top=160; } //大d圖片除以小的圖片的寬高 this.leftLgImg=-this.left*320/160; this.topLgImg=-this.top*181/91; }else{ //移動端 this.left=e.changedTouches[0].clientX-marksWidth/2; this.top=e.changedTouches[0].clientY-marksHeight/2; if(this.left<0){ this.left=0; }else if(this.left>160){ this.left=160; } if(this.top<0){ this.top=0; }else if(this.top>45){
//45就是小圖片的高度的一半，91/2 this.top=45; } //大d圖片除以小的圖片的寬高 this.leftLgImg=-this.left*320/160; this.topLgImg=-this.top*181/91; } } }, mounted(){ if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,)) { this.isPC = false; } else { console.log('PC端') } } }
css部分：
/* 左側大小圖樣式 160*91 320*181*/ .productLeft{ width:160px; position: relative; } /* 左側中圖 */ .mdImg,.mdImg>img{ width:160px; height:91px; margin-left: 15px; } /*遮罩層superMarks */ .superMarks{ width:160px; height:91px; background-color:rgba(220, 220, 220, 0); position:absolute; top:0px; left:0px; } /* 遮罩層 */ .marks{ width:48px; height:48px; position:absolute; background-color:rgba(220, 220, 220, 0.5); /*top:0px; //行內設定了動態的top，left left:0px;*/ } /* 左側隱藏大圖 */ .lgImg{ width:160px; height:91px; overflow: hidden; position:absolute; top:0px; left:195px; border:2px solid #aaa; background-color:#fff; } .lgImg img{ width:320px; height:181px; position:absolute; /*top:100px; left:100px;*/ }
兼容：移動端可f12選擇移動端查看（滑鼠長按移動查看效果），pc端滑鼠移動查看效果
大家的圖片的路徑記得要寫對！！！
還有第二種方法（vue的寫法）
vue-piczoom
先安裝此插件：
# 安裝 install npm install vue-piczoom --save
使用：
# 使用 use--scriptimport PicZoom from 'vue-piczoom'export default { name: 'App', components: { PicZoom }}--html<pic-zoom url="static/aze.jpg" :scale="3"></pic-zoom>
Suggest 注意事項
組件默認是100%的高寬，所以建議將組件包含在一個有固定高寬的容器內，如：
<div class="pic-box"> <!--pic-box:width:500px;height:500px--> <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom></div>
兼容：支持pc端，不支持移動端
Github
雖然以上的兩種方法已經可以滿足我們了，
但還為大家在網上搜索到以下的實作方法，大家有興趣可以移步觀看：
- 使用vue photo zoom pro：https://codepen.io/xbup/project/editor/AjnEgE
- js仿淘寶主圖放大鏡功能：https://www.moyublog.com/codes/2019-07-06/4.html
- vue.js手機端圖片點擊放大展示代碼：https://www.sucaihuo.com/js/3144.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/36753.html
標籤：HTML5
上一篇：支付寶小程式室內地圖導航開發-支付寶小程式JS加載esmap地圖
下一篇：HTML5遠程工具