Vue第六篇：电商网站图片放大镜功能

本文参考：https://blog.csdn.net/liushi21/article/details/127497487

效果如下：

 

功能实现分解如下：

（1）商品图区域：主要是浏览图片，根据图片的url显示图片。当鼠标离开此区域时"放大镜区域"不需要显示。

（2）鼠标放大区块。主要处理两个事情：

1）mouseenter：鼠标进入时，放大镜区域根据url显示图片

2）mousemove：鼠标移动时，鼠标的遮罩块区域跟着移动，同时放大镜区域的图片跟着切换（显示遮罩块的放大效果）

（3）商品图总览：鼠标over时，切换商品图区域的url图片。

 放大效果的实现方式：

主要是通过CSS的translate方法实现的。

放大镜区域其实放着一个大图，当鼠标在商品图区域移动时，放大镜区域的大图相向移动。

代码：

1、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{
    display: block;
    float: left;
    height: 54px;
    width: 54px;
    margin-left: 15px;
    border: 2px solid transparent;
}

.imgNow li:hover, #sign{
    border: 2px solid red;
}

/* 图片放大后的div区块 */
#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;
}

/* 图片放大后的div区块下的img区块 */
#seeDetail img{
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    width: 1800px;
    height: 1800px;
}

/* 鼠标查看区域 */
.move{
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 150px;
    cursor: move;
    background: rgba(142, 223, 255, 0.407);
}

/* 覆盖在放大图的原图表面上的一个遮罩层 */
.topMask{
    width: 452px;
    height: 452px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

2、home.vue代码：