vue中圖片放大鏡功能

仿淘寶詳情頁圖片鼠標移過去可對圖片放大顯示在右側

效果圖如下圖，此功能支持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
--script
import 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

雖然以上的兩種方法已經可以滿足我們了，

但還為大家在網上搜索到以下的實現方法，大家有興趣可以移步觀看：

1. 使用vue photo zoom pro：https://codepen.io/xbup/project/editor/AjnEgE
2. js仿淘寶主圖放大鏡功能：https://www.moyublog.com/codes/2019-07-06/4.html
3. vue.js手機端圖片點擊放大展示代碼：https://www.sucaihuo.com/js/3144.html