快捷導(dǎo)航

Vue圖片放大鏡組件的封裝使用詳解

更新時間：2021年08月18日 11:31:59 作者：WMMWYC

這篇文章主要為大家詳細(xì)介紹了Vue圖片放大鏡組件的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

基于Vue的圖片放大鏡組件封裝，供大家參考，具體內(nèi)容如下

圖片放大鏡的實現(xiàn)過程是將一個小圖放置在一個盒子里,當(dāng)鼠標(biāo)在小圖盒子里移動時，出現(xiàn)一個移動塊(陰影區(qū)域/遮罩層),右側(cè)大圖片盒子出現(xiàn)一個等比例放大的在小圖盒子移動塊中的圖片內(nèi)容。效果圖如下：

實現(xiàn)圖片放大鏡效果的Vue組件代碼如下：

<template>
  <div>
    <div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)">
      <div id="small">  //小圖片以及遮罩層容器
        <div id="float"></div>  //遮罩層
        <img :src="item" id="smallimg">  //需要放大的圖片
      </div>
    </div>
    <div id="big">
      <img :src="item">    //放大以后的圖片
    </div>
  </div>
</template>

<script>
  var float,smallimg,big,bigImg,small,float_maxJL_t,float_maxJL_l,bigImg_maxJL_t,bigImg_maxJL_l;

  export default{
    props: {
      item: {
        type: String
      }
    },
    data() {
     return{
     }
    }, 

    mounted(){
      float = document.getElementById("float"); //左側(cè)遮罩層
      smallimg = document.getElementById("smallimg"); //左邊的小圖
      big = document.getElementById("big"); //右側(cè)可視區(qū)域
      bigImg = big.getElementsByTagName("img")[0]; //右側(cè)大圖
      small = document.getElementById("small");// 左側(cè)的容器

      //得到右側(cè)可視區(qū)的寬高
      var bigW = big.clientWidth;
      var bigH = big.clientHeight;

      //右側(cè)大圖的寬高
      var bigImgW = bigImg.offsetWidth;
      var bigImgH = bigImg.offsetHeight;

      //左側(cè)的小圖的寬高
      var smallImgW = smallimg.offsetWidth;
      var smallImgH = smallimg.offsetHeight;

      //左側(cè)遮罩層的寬高
      float.style.width =  bigW/bigImgW * smallImgW + "px";   //175
      float.style.height = bigH/bigImgH * smallImgH/3*2 + "px";     

      //遮罩層運(yùn)動的最大距離
      float_maxJL_l = small.clientWidth -float.offsetWidth-10;
      float_maxJL_t = small.clientHeight - float.offsetHeight-5;

      //右側(cè)圖片運(yùn)動的最大距離
      bigImg_maxJL_l = bigImg.clientWidth - big.offsetWidth;
      bigImg_maxJL_t = bigImg.clientHeight - big.offsetHeight;

      big.style.display = "none";
      float.style.visibility ="hidden"; //鼠標(biāo)未移入左側(cè)區(qū)域使遮罩層以及右側(cè)大圖均不可見
    },

    methods: {
    //鼠標(biāo)移入左側(cè)區(qū)域使遮罩層以及右側(cè)大圖可見
      over: function () {
        float.style.visibility ="visible";
        big.style.visibility ="visible";
        big.style.display = "block";
      }, 

      //鼠標(biāo)移出左側(cè)區(qū)域使遮罩層以及右側(cè)大圖不可見
      out: function () {
        float.style.visibility ="hidden";
        big.style.display = "none";
      }, 

      //鼠標(biāo)移動時遮罩層隨鼠標(biāo)的移動而移動
      move: function (ev) {
        var l = ev.clientX  - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY  - small.offsetTop - float.offsetHeight/2;

        if( l < 0 ) l = 0;     // 超出左邊界賦值為0
        if( t < 0 ) t = 0;     // 超出上邊界賦值為0

        if( l > float_maxJL_l ) l = float_maxJL_l;  //限制其運(yùn)動范圍在容器之內(nèi)
        if( t > float_maxJL_t ) t = float_maxJL_t;

        //求出來一個比例
        var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

         //遮罩層運(yùn)動位置
        float.style.left = l + "px";
        float.style.top = t + "px"; 

         //右側(cè)大圖運(yùn)動位置
        bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
      },
    },
  }
</script>

//css樣式
<style lang="scss" rel="stylesheet/scss" scoped>
  @import 'src/assets/scss/variable.scss';
  #float {
    width: 120px;
    height: 120px;
    position: absolute;     //必須
    background: $primary;
    border: 1px solid #ccc;
    opacity: 0.5;
    cursor:move ;
  }
  #big {
    position: absolute;  //必須
    top: 260px;
    left: 37.6%;
    width: 350px;
    height: 500px;
    overflow: hidden;
    border: 1px solid #ccc;
    background: #ffffff;
    z-index: 1;
    visibility: hidden;
  }
  #small {
    position: relative;  //必須
    z-index: 1;
    img{
      width:340px;
      height:320px;
    }
  }
  #big img {
    position: absolute;   //必須
    z-index: 5;
    width:700px;
    height:700px;
  }
</style>

在css中需要注意設(shè)置各個圖片以及遮罩層的位置即position。

遮罩層分析：

左側(cè)遮罩層的寬(高) = 右側(cè)可視區(qū)域的寬（高）/右側(cè)大圖的寬（高）*左側(cè)小圖的寬（高）
（遮罩層可以理解為模擬右側(cè)大圖盒子，在右側(cè)大圖盒子中放置的是一張大的圖片，然后根據(jù)一定比例得到浮動區(qū)域，同時將盒子設(shè)置成溢出隱藏。右側(cè)大圖相對于右側(cè)容器的呈現(xiàn)比例和左側(cè)遮罩層相對于左側(cè)容器的比例相對應(yīng)）
遮罩層運(yùn)動的距離=左側(cè)容器的寬（高）-遮罩層的寬（高）；（使其總是在左側(cè)容器中運(yùn)動）
當(dāng)鼠標(biāo)移動到左側(cè)小圖盒子的時候我們需要實現(xiàn)鼠標(biāo)始終在遮罩層中，并且遮罩層會隨著鼠標(biāo)的移動而移動（言外之意：遮罩層的位置和鼠標(biāo)移動時的坐標(biāo)息息相關(guān)，且不能使它溢出左邊容器，計算方法見代碼）。

注意：這里有一個潛藏的bug,即當(dāng)你的界面滾動的時候，遮罩層不會隨界面的滾動而移動，當(dāng)界面向下滾動的時候，鼠標(biāo)在左側(cè)容器內(nèi)但卻不再在遮罩層區(qū)域里，且無法再移動遮罩層。解決辦法如下：

move = function (ev){
        var scroll =  this.getClientHeight(); //得到當(dāng)前界面移動的位置

        var l = ev.clientX  - small.offsetLeft - float.offsetWidth/2;
        var t = ev.clientY  - small.offsetTop - float.offsetHeight/2;

        t=t+scroll;  //遮罩層移動的高度應(yīng)該相應(yīng)的加上界面滾動的高度

        if( l < 0 ) l = 0;
        if( t < 0 ) t = 0; 

        if( l > float_maxJL_l ) l = float_maxJL_l;
        if( t > float_maxJL_t ) t = float_maxJL_t;

        var scaleL = l/float_maxJL_l;
        var scaleT = t/float_maxJL_t;

        float.style.left = l + "px";
        float.style.top = t + "px";

        bigImg.style.left = -scaleL * bigImg_maxJL_l + "px";
        bigImg.style.top = -scaleT * bigImg_maxJL_t + "px";
},
//獲取界面滾動的高度的方法
getClientHeight: function(){
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
      scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
      scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: