前端放大镜特效

pc端购物网站的商品有些具有放大镜特效，自己简单实现了一下

html部分

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="wrap">
        <div class="small_box">
            <img src="images/c2.jpg" alt="">
            <span id="mask"></span>
        </div>
        <div class="big_box">
            <img id="bigImg" src="images/c1.jpg" alt="">
        </div>
    </div>
    <div class="list">
        <img src="images/c2.jpg" alt="">
        <img src="images/d2.jpg" alt="">
        <img src="images/g2.jpg" alt="">
    </div>
    <script src="index.js"></script>
</body>

</html>
 
 
css部分·
 
* {
    padding: 0;
    margin: 0;
    border: none;
}

img {
    vertical-align: top;
}

#wrap {
    width: 350px;
    height: 350px;
    background: #e71208;
    margin: 50px 0 0 50px;
    position: relative;
}

.small_box {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    position: relative;
}

#mask {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 0, .4);
    position: absolute;
    left: 0;
    top: 0;
    cursor: move;
    display: none;
}

.big_box {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    position: absolute;
    top: 0;
    left: 360px;
    overflow: hidden;
    display: none;
}

.big_box img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.list {
    width: 450px;
    margin-top: 40px;
    text-align: center;
}

.list img {
    width: 100px;
    height: 100px;
    border: 1px solid rebeccapurple;
    cursor: pointer;
    margin: 5px;
}
js部分
 
window.onload = function() {
    let wrap = document.getElementById("wrap")
    let bigBox = document.getElementsByClassName("big_box")[0]
    let smallBox = document.getElementsByClassName("small_box")[0]
    let mask = document.getElementById("mask")
    let bigImg = document.getElementById("bigImg")
    let list = document.getElementsByClassName("list").children

    //监听鼠标进入小盒子
    smallBox.onmouseover = function() {
        mask.style.display = "block"
        bigBox.style.display = "block"
    }

    //监听鼠标移动
    smallBox.onmousemove = function() {
        let e = window.event || arguments[0]
            //求出鼠标的坐标
        let pointX = e.clientX - smallBox.offsetParent.offsetLeft
        let pointY = e.clientY - smallBox.offsetParent.offsetTop
            //让放大镜移动
            //让鼠标在mask中心
        pointX = pointX - mask.offsetWidth * 0.5
        pointY = pointY - mask.offsetHeight * 0.5
            //边界检测
        if (pointX < 0) {
            pointX = 0
        } else if (pointX >= smallBox.offsetWidth - mask.offsetWidth) {
            pointX = smallBox.offsetWidth - mask.offsetWidth
        }
        if (pointY < 0) {
            pointY = 0
        } else if (pointY >= smallBox.offsetHeight - mask.offsetHeight) {
            pointY = smallBox.offsetHeight - mask.offsetHeight
        }

        mask.style.left = pointX + "px"
        mask.style.top = pointY + "px"

        //大图移动
        bigImg.style.left = -pointX / (smallBox.offsetWidth / bigBox.offsetWidth) + "px"
        bigImg.style.top = -pointY / (smallBox.offsetHeight / bigBox.offsetHeight) + "px"
    }

    //监听鼠标离开小盒子
    smallBox.onmouseout = function() {
        mask.style.display = "none"
        bigBox.style.display = "none"
    }

}
 放大镜大图移动公式
smallX/bigX（坐标）=smallbox.width/大图宽度
bigX=smallX/(smallbox.width/大图宽度)

posted @ 2020-06-16 22:29  岱宗如何  阅读(378)  评论(0)  编辑  收藏  举报