淘寶放大鏡

呆·頭發表於2021-01-25
//圖片地址
let dataArr = [{
    small: "./images/imgA_1.jpg",
    middle: "./images/imgA_2.jpg",
    big: "./images/imgA_3.jpg"
}, {
    small: "./images/imgB_1.jpg",
    middle: "./images/imgB_2.jpg",
    big: "./images/imgB_3.jpg"
}, {
    small: "./images/imgC_1.jpg",
    middle: "./images/imgC_2.jpg",
    big: "./images/imgC_3.jpg"
}];

let artEle = document.querySelector("article");

//拼接article的內容
let str = "";

//初始化頁面
function renderImg() {
    str += `<section>
                <div class="box">
                    <img class="middleimg" src="${dataArr[0].middle}" alt="${0}">
                </div>
                <div class="bigimg"></div>
            </section>`;
    str += `<section>
    <input type="button" value="-">`;
    //新增小圖片(並新增下標)
    dataArr.map((item, index) => {
        str += `<img src="${item.small}" alt="${index}">`
    })
    str += `<input type="button" value="+">
           </section>`;
    artEle.innerHTML = str;
    //先生成在獲取節點
    let bigEle = document.getElementsByClassName("bigimg")[0];
    bigEle.style.backgroundImage = `url('${dataArr[0].big}')`;
}

renderImg();

//獲取小圖父節點、中圖、大圖的節點
//獲取大圖div並把它隱藏
let bigEle = document.getElementsByClassName("bigimg")[0];
bigEle.style.display = "none";
//中圖圖片
let middleimg = document.getElementsByClassName("middleimg")[0];
//大中圖包含塊
let secEle = document.getElementsByTagName("section");
//包含中圖div
let boxEle = document.getElementsByClassName("box")[0];
//生成蒙板
function meng() {
    //生成蒙板節點
    let asiEle = document.createElement("aside");
    asiEle.className = "meng";
    asiEle.style.width = (430 / 800) * 430 + "px";
    asiEle.style.height = (430 / 800) * 430 + "px";
    asiEle.style.backgroundImage = `url("./images/bg.png")`;
    //定位
    asiEle.style.position = "absolute";
    asiEle.style.left = 0;
    asiEle.style.top = 0;
    // 蒙版隱藏
    asiEle.style.display = "none";
    //新增蒙板到中圖div節點
    boxEle.appendChild(asiEle);
}
meng();
//點選小圖片,中圖和大圖進行更換
secEle[1].addEventListener("click", e => {
    let event = e || window.event;
    //獲取被點選下圖的下標
    if (event.target.localName == "img") {
        //大圖背景圖地址等於被點選的小圖的alt
        bigEle.style.backgroundImage = `url(${dataArr[event.target.alt].big})`;
        // 點選小圖時獲取小圖的alt座標等於dataArr的座標的中圖地址
        middleimg.src = dataArr[event.target.alt].middle;
        //點選加號或減號時判斷中途的下標
        middleimg.alt = event.target.alt;
    }
    if (event.target.value == "+") {
        //獲取當前圖片下標
        let index = ++middleimg.alt;
        //判斷是不是最後一張,如果是則停止
        index = index >= dataArr.length - 1 ? dataArr.length - 1 : index;
        // 把大圖的背景圖換成相應的圖
        bigEle.style.backgroundImage = `url(${dataArr[index].big})`;
        // 把中圖的背景圖換成相應的圖
        middleimg.src = dataArr[index].middle;
    }
    if (event.target.value == "-") {
        //獲取當前圖片下標
        let index = --middleimg.alt;
        //判斷是不是最後一張,如果是則停止
        index = index <= 0 ? 0 : index;
        
        bigEle.style.backgroundImage = `url(${dataArr[index].big})`;
        middleimg.src = dataArr[index].middle;
    }
});

//蒙板的顯示、隱藏、移動、大圖的移動
boxEle.addEventListener("mouseover", e => {
    let mengEle = document.getElementsByClassName("meng")[0];
    // 移入box顯示蒙版
    mengEle.style.display = "block";
    // 移入box顯示大圖
    bigEle.style.display = "block";
    //蒙版可移動區域
    boxEle.addEventListener("mousemove", e => {
        let event = e || window.event;
        //滑鼠在div可移動的位置= 滑鼠在瀏覽器的位置-滑鼠在事件源的位置-滑鼠在蒙版中部
        mengEle.style.left = event.clientX - boxEle.offsetLeft - mengEle.clientWidth / 2 + "px";
        mengEle.style.top = event.clientY - boxEle.offsetTop - mengEle.clientHeight / 2 + "px";
        //如果蒙版的移動超過或等於0,蒙版的左邊邊距為0
        //讓蒙版在div內移動,但蒙版會一部分到div外面
        if (parseInt(mengEle.style.left) <= 0) {
            mengEle.style.left = 0;
        }
        //如果蒙版的移動超過或等於0,蒙版的右邊邊距為0
           //讓蒙版在div內移動,但蒙版會一部分到div外面
        if (parseInt(mengEle.style.top) <= 0) {
            mengEle.style.top = 0;
        }
         //讓蒙版在div移動但不會到div外去
        if (parseInt(mengEle.style.left) >= boxEle.clientWidth - mengEle.clientWidth) {
            mengEle.style.left = boxEle.clientWidth - mengEle.clientWidth + "px";
        }
        //讓蒙版在div移動但不會到div外去
        if (parseInt(mengEle.style.top) >= boxEle.clientHeight - mengEle.clientHeight) {
            mengEle.style.top = boxEle.clientHeight - mengEle.clientHeight + "px";
        }

        bigEle.style.backgroundPositionX = -((800 / 430) * parseInt(mengEle.style.left)) + "px";
        bigEle.style.backgroundPositionY = -((800 / 430) * parseInt(mengEle.style.top)) + "px";
    })
//移出蒙版和大圖隱藏
    boxEle.addEventListener("mouseout", e => {
        mengEle.style.display = "none";
        bigEle.style.display = "none";
    })

})

相關文章