javascript放大镜

最新推荐文章于 2024-06-26 09:51:03 发布

海蓝鲸

最新推荐文章于 2024-06-26 09:51:03 发布

阅读量95

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_55999823/article/details/117400652

版权

在我们网购的时候，点击一个图片就会呈现出一个类似于放大镜的东西来放大这个图片，下面就是我用javascript写的一个放大镜的代码。

html

因为用的都是纯js写的，所以html没有多少代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <article>

    </article>
    <script src="js/index.js"></script>
</body>

</html>

css

css也只有少部分的代码

section {
    width: 1230px;
    margin: auto;
    display: flex;
}

div {
    width: 430px;
    height: 430px;
    border: 3px solid rgb(238, 117, 103);
    position: relative;
}

div:last-child {
    display: none;
}

主要部分为js代码

js

let imgArr = [{
    smallImg: "img/imgA_1.jpg",
    middelImg: "img/imgA_2.jpg",
    largeImg: "img/imgA_3.jpg",
},
{
    smallImg: "img/imgB_1.jpg",
    middelImg: "img/imgB_2.jpg",
    largeImg: "img/imgB_3.jpg",
},
{
    smallImg: "img/imgC_1.jpg",
    middelImg: "img/imgC_2.jpg",
    largeImg: "img/imgC_3.jpg",
},
];
initPage();
let secEles = document.getElementsByTagName("section");

//获取中图区域节点
let leftbox = secEles[0].firstElementChild;

//获取大图区域节点
let rightbox = secEles[0].lastElementChild;

//初始化中图和大图
leftbox.style.backgroundImage = `url(${imgArr[0].middelImg})`;
leftbox.dataset.index = 0;
rightbox.style.backgroundImage = `url(${imgArr[0].largeImg})`;

//初始化页面
function initPage() {
let artEle = document.getElementsByTagName("article")[0];
artEle.innerHTML = `
    <section>
        <div class="leftbox"></div>
        <div class="rightbox"></div>
    </section>
`;
let secEle = document.createElement("section");
let btnLeft = document.createElement("input");
btnLeft.type = 'button';
btnLeft.value = "<";
secEle.appendChild(btnLeft);
imgArr.forEach(
    (item, index) => {
        let imgEle = document.createElement("img");
        imgEle.src = item.smallImg;
        imgEle.dataset.index = index;
        secEle.appendChild(imgEle);
    }
);
let btnRight = document.createElement("input");
btnRight.type = 'button';
btnRight.value = ">"
secEle.appendChild(btnRight);
artEle.appendChild(secEle);

}




//点击小图更改中图和大图
secEles[1].addEventListener("click", e => {
let event = e || window.event;
if (event.target.localName == "img") {
    //获取触发事件的下标
    let index = event.target.dataset.index;
    //为了实现前一张和后一张的效果
    leftbox.dataset.index = index;
    changeImg(index);
}
//前一张
if (event.target.value == "<") {
    let index = --leftbox.dataset.index;
    if (index >= 0) {
        changeImg(index);
    } else {
        leftbox.dataset.index = 0;
        changeImg(0);
    }
}
//后一张
if (event.target.value == ">") {
    let index = ++leftbox.dataset.index;
    if (index < imgArr.length) {
        changeImg(index);
    } else {
        leftbox.dataset.index = imgArr.length - 1;
        changeImg(imgArr.length - 1);
    }
}
})

secEles[0].firstElementChild.addEventListener("mouseenter", movelanlan);

function movelanlan(e) {
let event = e || window.event;
//新增蒙板
let asideEle = document.createElement("aside");
asideEle.style.position = "absolute";
//蒙板的尺寸，根据中图与大图的比例计算而来
asideEle.style.width = (430 / 800) * 430 + "px";
asideEle.style.height = (430 / 800) * 430 + "px";

asideEle.style.backgroundColor = 'rgba(0,0,255,0.3)';
this.appendChild(asideEle);


secEles[0].firstElementChild.addEventListener("mousemove", function(e) {
    let event = e || window.event;
    secEles[0].lastElementChild.style.display = "block";
    //获取鼠标移动的尺寸
    let mengX = event.clientX - secEles[0].offsetLeft;
    let mengY = event.clientY - secEles[0].offsetTop;


    //设置蒙板移动的尺寸
    asideEle.style.left = mengX - asideEle.offsetWidth / 2 + "px";
    asideEle.style.top = mengY - asideEle.offsetHeight / 2 + "px";
    //获取蒙板可移动最大值

    let asideMaxL = secEles[0].lastElementChild.clientWidth - asideEle.offsetWidth;
    let asideMaxT = secEles[0].lastElementChild.clientHeight - asideEle.offsetHeight;
    //设置蒙板不超出中图区域
    if (parseInt(asideEle.style.left) <= 0) {
        asideEle.style.left = 0;
    }
    if (parseInt(asideEle.style.top) <= 0) {
        asideEle.style.top = 0;
    }
    if (parseInt(asideEle.style.left) >= asideMaxL) {
        asideEle.style.left = asideMaxL + "px";
    }
    if (parseInt(asideEle.style.top) >= asideMaxT) {
        asideEle.style.top = asideMaxT + "px";
    }
    //移动大图背景的位置
    let largeX = -parseInt(asideEle.style.left) * (800 / 430) + "px";
    let largeY = -parseInt(asideEle.style.top) * (800 / 430) + "px";


    secEles[0].lastElementChild.style.backgroundPosition = `${largeX} ${largeY}`;
    secEles[0].lastElementChild.style.backgroundRepeat = 'no-repeat';

});


secEles[0].firstElementChild.addEventListener("mouseleave", function() {
    asideEle.style.display = 'none';
    secEles[0].lastElementChild.style.display = "none";
});
}


function changeImg(index) {
//通过下标获取中图图片地址
let midSrc = imgArr[index].middelImg;
leftbox.style.backgroundImage = `url(${midSrc})`;

//通过下标获取大图图片地址
let lagSrc = imgArr[index].largeImg;
rightbox.style.backgroundImage = `url(${lagSrc})`;
}

做出来的效果就如下图所示，希望对你们有些帮助
在这里插入图片描述

海蓝鲸

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
javascript放大镜

在我们网购的时候，点击一个图片就会呈现出一个类似于放大镜的东西来放大这个图片，下面就是我用javascript写的一个放大镜的代码。html因为用的都是纯js写的，所以html没有多少代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫