快捷導(dǎo)航

Vue實現(xiàn)電商網(wǎng)站商品放大鏡效果示例

更新時間：2022年10月24日 15:13:48 作者：雩風(fēng)十六

這篇文章主要為大家介紹了Vue實現(xiàn)電商網(wǎng)站商品放大鏡效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

效果圖

各部分代碼

HTML部分

    <div id="goodsPics">
        <!--當前查看商品圖區(qū)域-->
        <div id="imgPre" style="position: relative;"
         @mouseleave="seeEnd">
         <div ref="imgPre">
          <img :src="url" alt="picNow">
         </div>
            <div class="topMask" @mouseenter="seeBegin($event)" @mousemove="move($event)"></div>
            <!--鼠標放大鏡模塊-->
            <div ref="move" v-show="isShow"
              class="move"
              :style="cursorMask">
            </div>
        </div>
        <!--商品圖總覽 —— 就是一排的小圖-->
        <ul class="imgNow">
            <li  v-for='(item,index) in goodsImgs' :key='item.id' @mouseover="seeThis(index)" :id="urlIndex == index?'sign':''">
              <img style="width: 54px; height: 54px;" :src="item.src" alt="pics">
            </li>
        </ul>
            <!--放大鏡區(qū)域 —— 查看商品圖放大后的效果-->
            <div v-if="isShow" id="seeDetail" ref="bigImg">
              <img :src="Bigurl" alt="" :style="imgMove">
            </div>
    </div>

CSS部分

#page{
  position: relative;
  height: 700px;
  width: 1246px;
  left: 19.3%;
  top: 111px;
  background-color: aqua;
}
/*商品圖*/
#goodsPics{
  width: 452px;
  height: 626px;
  background-color: blue;
  position: relative;
  top: 10px;
}
/*當前所查看的圖片，也即所需要局部放大查看的圖片*/
.imgNow{
  position: relative;
  top: 15px;
  left: 37px;
}
.imgNow li{
/*CSS3給盒子:hover添加border時，盒子發(fā)生抖動的解決方案之一: 給盒子設(shè)置初始透明邊框*/
  display: block;
  float: left;
  height: 54px;
  width: 54px;
  margin-left: 15px;
  border: 2px solid transparent
}
.imgNow li:hover, #sign{
  border: 2px solid red;
}
#seeDetail{
 /*注意定位，父相子絕*/
  position: absolute;
  background-color: aliceblue;
  width: 600px;
  height: 600px;
  top: 0%;
  left: 101%;
  overflow: hidden;/*隱藏圖片溢出查看框之外的部分*/
  border: 2px solid #f90;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#seeDetail img{
  position: absolute;
  /*這里注意下，初始時候?qū)⒉榭纯騼?nèi)待放大圖的左上角定位與查看框的左頂點處，也即其定位原點處*/
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  /*我自己的圖片設(shè)置的寬高是450×450，所以這里放大部分的圖片的寬高設(shè)置為原圖的四倍*/
  /*這個倍數(shù)需要注意，后面進行坐標變換的時候要用上*/
  width: 1800px;
  height: 1800px;
}
/*鼠標查看區(qū)域 —— 也即需要放大局部放大查看的區(qū)域*/
.move{
  position: absolute;
  /*初始定位*/
  left: 0;
  top: 0;
  width: 150px;
  height: 150px;
  cursor: move;
  background: rgba(142, 223, 255, 0.407);
}
.topMask{
/*覆蓋在放大圖的原圖表面上的一個遮罩層*/
  width: 452px;
  height: 454px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

js部分

export default {
  data(){
    return{
      url: require("@/pages/amusement/羅技鼠標廣告2.jpg"),
      Bigurl: require("@/pages/amusement/羅技鼠標廣告2.jpg"),//放大鏡區(qū)域的圖片資源
      //上面兩個是初始值
      urlIndex: -1,//urlIndex用于在圖片列表中
      isShow: 0,
      cursorMask:{transform:''},//使用CSS3控制原圖上鼠標預(yù)覽區(qū)域的移動
      imgMove:{transform:''},//使用CSS3控制放大鏡區(qū)域圖片的移動
      goodsImgs:[
        {
          id:0,
          src: require("@/pages/amusement/羅技鼠標廣告2.jpg")
        },
        {
          id: 1,
          src: require("@/pages/amusement/羅技鼠標廣告3.jpg")
        },
        {
          id: 2,
          src: require("@/pages/amusement/羅技鼠標廣告4.jpg")
        },
        {
          id: 3,
          src: require("@/pages/amusement/羅技鼠標廣告5.jpg")
        },
        {
          id: 4,
          src:require("@/pages/amusement/羅技鼠標廣告1.jpg"),
        }
      ]
    }
  },
  methods:{
    seeThis(index){
      this.url = this.goodsImgs[index].src;
      this.urlIndex = index;
    },
    move(e){
     /*  效果實現(xiàn)的核心，計算光標位置的坐標，通過修改鼠標預(yù)覽區(qū)域的坐標來實現(xiàn)放大區(qū)域的移動
      *  注意這里使用的 offsetX 和 offsetY，是獲取當前元素相對于其父元素的對應(yīng)偏移量
      */
      var x = e.offsetX - 75;
      var y = e.offsetY - 75;
      //放置鼠標預(yù)覽區(qū)域移動到原圖區(qū)域左邊以外
      if(x<0){
        x = 0;
      }else if(x > 300){ 
          //防止預(yù)覽區(qū)域移動到右邊以外
          //300 = 450 - 150
        x = 300;
      }
      if(y < 0){
        y = 0;
      }else if(y > 300){
        y = 300;
      }
      //使用模板字符串和變量拼接
      //這里注意: 根據(jù)實際上的效果，我們的預(yù)覽區(qū)域左移時，放大鏡查看區(qū)域的大圖相當于等比例地右移，所以我們這里應(yīng)當設(shè)置大圖的移動方向與預(yù)覽區(qū)相反，移動距離與預(yù)覽區(qū)成比例
      //比例計算：放大倍數(shù) = 大圖所在div的寬高 / 原圖所在div的寬高
      this.cursorMask.transform = `translate(${x}px, ${y}px)`;
      this.imgMove.transform = `translate(-${4*x}px, -${4*y}px)`;//向反方向成比例移動
    },
    seeBegin(e) {
      //move(e); 這里也可以不用
      this.Bigurl = this.url;
      this.isShow = 1;
    },
    seeEnd(){
      //鼠標移出原圖區(qū)域時，清空相關(guān)信息
      this.Bigurl = "";
      this.left = 0;
      this.top = 0;
      this.isShow = 0;
    }
  },
}

總結(jié)

放大鏡功能的核心實現(xiàn)思路就是兩張圖，一大一小，計算光標預(yù)覽區(qū)域左上角的坐標，然后根據(jù)兩張圖所在div的對應(yīng)寬高比，等比反方向移動大圖，溢出部分設(shè)置overflow: hidden，從而實現(xiàn)放大鏡的效果

需要的知識點：

在css3的實現(xiàn)方法中，可以使用transform: translate()，來設(shè)置圖片的移動，此外還可以使用js獲取標簽進行對應(yīng)屬性的更改。
這里面主要是對pageX、pageY、offsetX、offsetY、offsetLeft、offsetTop、clientX、clientY等的區(qū)分使用

以上就是Vue實現(xiàn)電商網(wǎng)站商品放大鏡效果示例詳解的詳細內(nèi)容，更多關(guān)于Vue 網(wǎng)站商品放大鏡的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: