figure里放商品的图片，为背景图

ul里存放商品的缩小图

div.big里放放大的图片

    <div class="scale">
        <figure>
            <div class="scale-drag"></div>
        </figure>
        <ul>
            <li><img src="./images/test1.png" alt=""></li>
            <li><img src="./images/test2.png" alt=""></li>
            <li><img src="./images/test3.png" alt=""></li>
        </ul>
        <div class="big">
            <img src="./images/test3.png" alt="">
        </div>
    </div>

图片放大的比例为原图的2倍 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    margin-top: 20px;
}
ul{
    list-style: none;
}
.scale {
    position: relative;
    width: 300px;
    margin: 0 auto;
}
.scale-drag{
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: rgba(255,255,255,0.5);
    cursor: pointer;
    opacity: 0;
}
.scale>figure{
    position: relative;
    width: 300px;
    height: 300px;
    background: url(./images/test1.png) no-repeat;
    background-size:  100% 100%;
}
.scale>ul {
    display: flex;
    width: 100%;
    justify-content: space-around;
}
.scale>ul>li {
    width: 54px;
    height: 54px;
}
.scale>ul>li img{
    width: 100%;
   
}
.big {
    display: none;
    position: absolute;
    left: 300px;
    top: 0;
    width: 300px;
    height: 300px;
    border: 1px solid gray;
    overflow: hidden;
}
.big>img {
    position: absolute;
    width: 600px;
    height: 600px;
}

先获取元素，

当鼠标移入或点击缩小图时，figure里的图片变成地址一样的图片， 

计算出 盒子中心应该在的位置，超过边界时为边界值，没超出就移动e.clientX - scaleLeft - 75，e.clientY - scaleTop - 75距离,放大的图移动2倍距离，且为反方向，

鼠标移出放大图就消失

var ul = document.querySelector(".scale>ul");
var figure = document.querySelector("figure");
var drag = document.querySelector(".scale-drag");
var scale = document.querySelector(".scale");
var bigImg = document.querySelector(".big>img");
var big = document.querySelector(".big");

var scaleLeft = scale.offsetLeft;
var scaleTop = scale.offsetTop;
// 鼠标可以移动的最大宽度和高度
var maxW = figure.clientWidth - drag.clientWidth;
var maxH = figure.clientHeight - drag.clientHeight;

//切换图片
ul.onclick = function(e){
    if(e.target.tagName === "IMG"){
        var src = e.target.src;
        figure.style.backgroundImage = "url(" + src +")";
        bigImg.src = src;
    }
}
ul.onmouseover = function(e){
    if(e.target.tagName === "IMG"){
        var src = e.target.src;
        figure.style.backgroundImage = "url(" + src +")";
        bigImg.src = src;
    }
}

figure.onmousemove = function(e){
    // 盒子中心应该的位置
    var x = e.clientX - scaleLeft - 75;
    var y = e.clientY - scaleTop - 75;
    // 限制边界
    if(x < 0)x = 0;
    if(x > maxW)x = maxW;
    if(y < 0)y = 0;
    if(y >maxH)y = maxH;
    drag.style.left = x + "px";
    drag.style.top = y + "px";
    bigImg.style.left = -2 * x + "px";
    bigImg.style.top = -2 * y + "px";
}
figure.onmouseover = function(){
    drag.style.opacity = 1;
    big.style.display = "block";
}
figure.onmouseleave = function(){
    drag.style.opacity = 0;
    big.style.display = "none";
}

效果：