放大镜

CSS代码

section {
    display: flex;
}

div {
    width: 430px;
    height: 430px;
    outline: 1px solid black;
    overflow: hidden;
    position: relative;
}

.bimg {
    background-image: url("./images/bg.png");
    background-repeat: repeat;
    position: absolute;
}

JS代码

let imgArr = [
    ["./images/imgA_1.jpg", "./images/imgB_1.jpg", "./images/imgC_1.jpg"],
    ["./images/imgA_2.jpg", "./images/imgB_2.jpg", "./images/imgC_2.jpg"],
    ["./images/imgA_3.jpg", "./images/imgB_3.jpg", "./images/imgC_3.jpg"],
];

//创建页面结构
let bodyEle = document.getElementsByTagName("body")[0]
bodyEle.innerHTML = `
<article>
<section>
    <div></div>
    <div></div>
</section>
<section>
    <input type="button" value="&lt">
    <input type="button" value="&gt">
</section>
</article>
`;


let artEle = document.getElementsByTagName("article")[0];
secEles = artEle.children;
divEle1 = document.getElementsByTagName("div")[0];
divEle2 = document.getElementsByTagName("div")[1];
inpEle1 = document.getElementsByTagName("input")[0];
inpEle2 = document.getElementsByTagName("input")[1];
//创建中图片节点
let imgEleM = document.createElement("img");
divEle1.appendChild(imgEleM);
//创建大图片节点
let imgEleL = document.createElement("img");
imgEleL.style.position = "absolute";
divEle2.appendChild(imgEleL);
//用背景图方式就把上面img节点注释
divEle2.style.display = "none";



//生成三张小图片
function creatSmallPic() {
    for (let index in imgArr[0]) {
        let imgEleS = document.createElement("img");
        imgEleS.setAttribute("src", imgArr[0][index])
        secEles[1].insertBefore(imgEleS, inpEle2);
        imgEleS.setAttribute("onclick", `changeIndex(${index})`);
        if (index == 0) {
            imgEleM.src = imgArr[1][0]
            //img标签
            imgEleL.src = imgArr[2][0]
            //背景图
            // divEle2.style.backgroundImage = `url(${imgArr[2][0]})`
        }

    }
}
creatSmallPic();

// 点击小图更换中图和大图
function changeIndex(index) {
    i = index;
    imgEleM.setAttribute("src", imgArr[1][i]);
    //背景图
    // divEle2.style.backgroundImage = `url(${imgArr[2][0]})`
    //img标签
    imgEleL.setAttribute("src", imgArr[2][i]);
    imgEleM.dataset.index = i;
    imgEleL.dataset.index = i
}

//上一张和下一张
let i = 0;
imgEleM.setAttribute("src", imgArr[1][i])
//背景图
// divEle2.style.backgroundImage = `url(${imgArr[2][i]})`
//img标签
imgEleL.setAttribute("src", imgArr[2][i])
inpEle1.addEventListener("click", e => {
    if (i > 0) {
        i--;
    } else {
        i = 2
    }
    imgEleM.setAttribute("src", imgArr[1][i])
    //背景图
    // divEle2.style.backgroundImage = `url(${imgArr[2][i]})`
    //img标签
    imgEleL.setAttribute("src", imgArr[2][i])
})
inpEle2.addEventListener("click", e => {
    if (i < 2) {
        i++;
    } else {
        i = 0;
    }
    imgEleM.setAttribute("src", imgArr[1][i])
    //背景图
    // divEle2.style.backgroundImage = `url(${imgArr[2][i]})`
    //img标签
    imgEleL.setAttribute("src", imgArr[2][i])
})

//生成蒙板
function meng() {
    let divEle = document.createElement("div");
    divEle.style.width = (430 / 800) * 430 + "px";
    divEle.style.height = (430 / 800) * 430 + "px";
    divEle.style.left = 0 + "px";
    divEle.style.top = 0 + "px";
    divEle.style.display = "none";
    divEle.className = "bimg";
    divEle1.appendChild(divEle)
}
meng();

// 蒙板的显示、隐藏、移动、大图的移动
divEle1.addEventListener("mouseover", e => {
    let mengEle = document.getElementsByClassName("bimg")[0];
    mengEle.style.display = "";
    divEle2.style.display = "";

    divEle1.addEventListener("mousemove", e => {
        let event = e || window.event;
        mengEle.style.left = event.clientX - divEle1.offsetLeft - mengEle.clientWidth / 2 + "px";
        mengEle.style.top = event.clientY - divEle1.offsetTop - mengEle.clientHeight / 2 + "px";
        if (parseInt(mengEle.style.left) <= 0) {
            mengEle.style.left = 0
        }
        if (parseInt(mengEle.style.top) <= 0) {
            mengEle.style.top = 0
        }
        if (parseInt(mengEle.style.left) >= divEle1.clientWidth - mengEle.clientWidth) {
            mengEle.style.left = divEle1.clientWidth - mengEle.clientWidth + "px";
        }
        if (parseInt(mengEle.style.top) >= divEle1.clientHeight - mengEle.clientHeight) {
            mengEle.style.top = divEle1.clientHeight - mengEle.clientHeight + "px";
        }

        //背景图模式
        // divEle2.style.backgroundPositionX = -((800 / 430) * parseInt(mengEle.style.left)) + "px";
        // divEle2.style.backgroundPositionY = -((800 / 430) * parseInt(mengEle.style.top)) + "px";

        //img标签模式
        imgEleL.style.left = -((800 / 430) * parseInt(mengEle.style.left)) + "px";
        imgEleL.style.top = -((800 / 430) * parseInt(mengEle.style.top)) + "px";
    })

    divEle1.addEventListener("mouseout", e => {
        mengEle.style.display = "none";
        divEle2.style.display = "none";
    })
})

效果图：