vue项目——商品详情页面图片放大镜效果实现(完成)

待我称王封你为后i 2022-08-31 02:27 228阅读 0赞

昨天在做商品详情页面时，遇到一个需求，就是图片放大镜效果。在图片上鼠标划过时，右侧出现一个大图，用于展示鼠标移过的区域，也就是图片放大镜效果。  
![在这里插入图片描述][72ecd71a03dac69cf795cbf149eabac1.png]  
效果图基本类似如下：  
![在这里插入图片描述][6cf2ded1bbc523847bec022e3ecd4d93.png]  
我之前有篇文章[js实现图片放大镜效果：https://blog.csdn.net/yehaocheng520/article/details/115278622?spm=1001.2014.3001.5501][js_https_blog.csdn.net_yehaocheng520_article_details_115278622_spm_1001.2014.3001.5501]

当时是用`js`实现的效果，因此现在要把代码嫁接到`vue`创建的项目中。

`html`部分代码：

## 图片放大镜效果的重点——`css`和`js`部分 ##

#### `css`部分的关键 ####

这个效果有个特别的`css`样式，分析一下有几个元素；  
**左侧图片原图**：这个就是个普通的图片，可以通过`background`设置图片路径，也可以是一个`img`标签来展示。  
**图片上的鼠标移动区域**:这个比较需要注意的是：这个是个绝对布局，为了`js`部分计算简单，我使用了`200x200`的大小，颜色为一个偏透明的色号  
**右侧大图**:这个也是个绝对布局，采用`background`的方式来设置图片路径和背景参数，`background-size`设置成大于1的参数。

`css`部分代码如下：

.big-img-box { 
      width: 480px;
      height: 360px;
      margin: 0 0 20px;
      border: 1px solid #eee;
      position: relative;
      .imgWrap { 
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .move { 
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background: rgba(0, 0, 255, 0.15);
        cursor: move;
      }
      .bigPic { 
        width: 480px;
        height: 480px;
        position: absolute;
        left: 480px;
        top: 0;
        border: 2px solid #f90;
        background-position: 0 0;
        background-size: 300% 300%;
        background-repeat: no-repeat;
        z-index: 2;
      }
    }

原图下方的小图部分：就是一排普通的图片，`css`样式部分并无不同

.small-img-box { 
      width: 480px;
      height: 70px;
      position: relative;
      .img-content-box { 
        width: 100%;
        margin: 0 auto;
        height: 100%;
        display: block;
        ul { 
          width: 105%;
          height: 100%;
          li { 
            display: inline-block;
            width: 88px;
            height: 100%;
            margin-right: 10px;
            overflow: hidden;
            img { 
              display: block;
              width: 100%;
            }
          }
        }
      }
    }

#### `js`部分的关键——鼠标的移入移出事件+`dom`元素的位置及大小 ####

在用`js`实现此效果时，需要用到几个重要的参数

1.  左侧原图距离左侧的大小——`oAppLeft`
2.  左侧原图距离上方的大小——`oAppTop`
3.  鼠标移入后的位置`e.pageX e.pageY`,之前的`js`版本的效果用的是`e.clientX e.clientY`，这个`e.clientX`有问题，这个参数会跟着屏幕的滚动而发生变化，我们需要的是一个不会变化的值，鼠标的位置对于整个页面来说是固定的，而不是随着页面的滚动发生变化。
4.  移动区域的大小——可以通过`style.width style.height`来获取，但是我在`css`部分为了方便，直接固定为`200X200`，因此我这边是直接使用的`200`的数值

![在这里插入图片描述][449d6aeb0c7803ac7687893627141917.png]

#### 左侧原图距离左边和上边的大小——`oAppLeft`与`oAppTop`的计算 ####

mounted() { 
      this.$nextTick(() => { //页面加载完成后再去获取`dom`元素的位置
        this.oAppLeft = this.$refs["big-img-box"].offsetLeft;
        this.oAppTop = this.$refs["big-img-box"].offsetTop;
      });
    },

#### 针对普通的`dom`元素可以通过`this.$refs[xxx].xxx`的方式来获取 ####

#### 针对`v-for`等渲染的`dom`元素可以通过`this.$refs[xxx][0].xxx`的方式来获取 ####

鼠标移入移出需要注意的部分：

1.  左侧原图具体展示哪张图片可以根据一个字段`bigImgUrl`来处理。下方下图鼠标移入时，更改`bigImgUrl`的值，就可以了
2.  鼠标移入到左侧原图时，开始出现选择框，右侧展示选择框中的图片放大效果，也就是说：左侧原图需要加一个鼠标移入的监听事件

上面`html`结构中的`class='imgWrap'就是左侧原图部分`；

#### 鼠标移入的函数——鼠标移入的位置就是选择框的初始位置 ####

//鼠标移入后，就要展示选择框，因此鼠标移入的位置跟选择框的位置有关
    movestart(e) { 
      this.move(e);
      this.bigImgUrl = this.bigImgsrc;
      var imgUrl = this.HOST + this.commonUploadFileUrl + this.bigImgUrl;//这个就是当前图片的路径，不管多管
      this.$nextTick(() => { //页面加载完成后，更改大图的`backgroundImage`,这个也可以直接在html中动态绑定style，那样会简单很多
        this.$refs.bigPic.style.backgroundImage = `url(${ imgUrl})`;
      });
    },

#### 选择框鼠标移动的位置——改变选择框的位置 ####

//鼠标移动时，选择框的位置也会发现改变
    move(e) { 
      var left = e.pageX - this.oAppLeft - 100;
      var top = e.pageY - this.oAppTop - 100;
      if (left < 0) { 
        left = 0;
      } else if (left > 280) { 
        left = 280;
      }
      if (top < 0) { 
        top = 0;
      } else if (top > 160) { 
        top = 160;
      }
      this.left = -left * 3;
      this.top = -top * 3;
    },

#### 左侧原图鼠标移出——隐藏选择框和大图(将`bigImgUrl`置为空即可) ####

moveend() { 
          this.bigImgUrl = "";
          this.left = 0;
          this.top = 0;
        },

最终功能实现！！！！

## 补充：注意事项——上面的比例部分有问题，更改如下： ##

#### 1.左侧原图最好是设置为`div`的背景图片 ####

因为图片放大镜的原理就是通过`backgroundSize`\+`backgroundPostion`两个属性配合使用的。为了保证左侧原图和右侧大图保持一致。最好统一都设置为背景图片。如果左侧原图不设置为背景图片，则需要将`class="imgWrap"`中的`img`宽高设置为100%.

#### 2.比例是怎么来的？ ####

在这个项目中，有用到两个比例，一个是右侧大图`backgroundSize`，一个是右侧大图的位置`left top`的计算比例。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
注意此处的`background-size`的比例跟左侧原图的宽高是有关系的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
左侧原图的宽高比例是：480：360，也就是：4：3；因此右侧大图的`background-size`应该设置为`400% 300%`;上面的比例是错误的。或者可以将左侧原图的大小改为：`width:360px;height:360px;`，则此时的右侧大图的`background-size`可以设置为`300% 300%`,也就是方法3倍的意思。

`this.left this.top`的比例是怎么来的？？？？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
注意这个地方：左侧原图上的选择框大小是：`width:200px height:200px` ,右侧大图的大小是：`width:360px; height:360px;`，也就是右侧大图是左侧选择框的1.8倍，因此此处的比例应该是`1.8`,上面的内容应该改为：`this.left = -left * 1.8;this.top = -top*1.8;`

选择框在左侧原图中的边界计算：

一定要注意：我们计算的是选择框的`left top`值，也就是左上角顶点的位置。

因此选择框的边界4个值就是：(0,0) (左侧原图的宽度-选择框的宽度，0) (左侧原图的宽度-选择框的宽度,左侧原图的高度-选择框的高度) (0,左侧原图的高度-选择框的高度)

[72ecd71a03dac69cf795cbf149eabac1.png]: /images/20220829/27aed5be8080432eb0059df148534c22.png
[6cf2ded1bbc523847bec022e3ecd4d93.png]: /images/20220829/8be6a75c5d014a82a5a3c36132cfd0d5.png
[js_https_blog.csdn.net_yehaocheng520_article_details_115278622_spm_1001.2014.3001.5501]: https://blog.csdn.net/yehaocheng520/article/details/115278622?spm=1001.2014.3001.5501
[449d6aeb0c7803ac7687893627141917.png]: /images/20220829/7275015f455d400aa090f21c1c339ff8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/1427b81d6b5249ae8c8d520121655e9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/ac1eb0a8403744748d4e718926cb52d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/573699ad3806492cb523fa89978c993b.png