JS实现图片放大镜效果

最新推荐文章于 2022-11-27 00:04:16 发布

zhqqqqqqqqq

最新推荐文章于 2022-11-27 00:04:16 发布

阅读量274

点赞数

文章标签： javascript 前端 ecmascript

本文链接：https://blog.csdn.net/zhqqqqqqqqq/article/details/122074851

版权

实现效果如下图：

//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>Document</title>
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
</head>
<body>
    <div class="demo">
        <img src="image/image.jpg" alt="" class="demo_img">
        <div class="demo_mouse"></div>
        <div class="demo_enlarge">
            <img src="image/image.jpg" alt="" class="demo_enlarge_img">
        </div>
    </div>
</body>
</html>

//CSS代码
.demo{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #eee;
    cursor: pointer;
}
.demo_img{
    width: 100%;
    height: 100%;
    /* object-fit: contain; */

}
.demo>.demo_mouse{
    display: none;
    width: 100px;
    height: 100px;
    left: 0;
    top: 0;
    position: absolute;
    background-color: #ff8f00;
    opacity: 0.3;
}
.demo>.demo_enlarge{
    display: none;
    width: 500px;
    height: 500px;
    left: 320px;
    top: 0;
    /* background-color: #ff8f00; */
    position: absolute;
    overflow: hidden;
    /* background-color: #ff8f00; */
    /* opacity: 0.5; */
}
.demo_enlarge_img{
    position: absolute;
    top: 0;
    left: 0;
    width: 1500px;
    height: 1500px;
}

//JS代码
window.addEventListener('load', function () {
    let odemo = document.querySelector(".demo")
    let odemo_mouse = document.querySelector(".demo_mouse")
    let odemo_enlarge = document.querySelector(".demo_enlarge")
    let odemo_enlarge_img =document.querySelector(".demo_enlarge_img")
    odemo.addEventListener("mouseover", function () { enterShow("show") })
    odemo.addEventListener("mouseout", function () { enterShow("close") })
    odemo.addEventListener("mousemove", function (e) { let that = this; getLocation(that, e) })
    function enterShow(add) {
        if (add == "show") {
            odemo_mouse.style.display = "block";
            odemo_enlarge.style.display = "block";
        } else {
            odemo_mouse.style.display = "none";
            odemo_enlarge.style.display = "none";
        }

    }
    function getLocation(that, e) {//鼠标只要移动就触发此方法
        let X = e.pageX - that.offsetLeft  //拿到鼠标在.demo中的位置
        let Y = e.pageY - that.offsetTop    //拿到鼠标在.demo中的位置
        let maskX = X - odemo_mouse.offsetWidth / 2   // /2是为了控制鼠标在黄色阴影中心位置
        let maskY = Y - odemo_mouse.offsetHeight / 2   // /2是为了控制鼠标在黄色阴影中心位置
        if (maskX < 0) { //防止黄色阴影跑出.demo外（设置黄色阴影的移动区间）
            maskX = 0
        } else if (maskX > odemo.offsetWidth - odemo_mouse.offsetWidth) {
            maskX = odemo.offsetWidth - odemo_mouse.offsetWidth
        }
        if (maskY < 0) {
            maskY = 0
        } else if (maskY > odemo.offsetHeight- odemo_mouse.offsetHeight) {
            maskY = odemo.offsetHeight - odemo_mouse.offsetHeight
        }
        odemo_mouse.style.top = maskY + "px" //将黄色阴影的Top移动到鼠标位置
        odemo_mouse.style.left = maskX + "px" //将黄色阴影的Top移动到鼠标位置
        let bigMax =odemo_enlarge_img.offsetWidth-odemo_enlarge.offsetWidth
        let bigX =maskX*bigMax/(odemo.offsetWidth - odemo_mouse.offsetWidth)
        let bigY =maskY*bigMax/(odemo.offsetHeight - odemo_mouse.offsetHeight)
        odemo_enlarge_img.style.left=-bigX+"px"
        odemo_enlarge_img.style.top=-bigY+"px"
    }
})

HTML与CSS代码没有需要注意的地方，关键在于JS代码的书写

首先利用JS获取到关键的DOM节点

此功能分为3点：

1.鼠标移入显示黄色阴影部分，鼠标移出黄色阴影部分消失.