其他分享
首页 > 其他分享> > 使用js实现放大镜功能

使用js实现放大镜功能

作者:互联网

ps:放大镜的功能     

记得下载本文最后的图片然后修改相应的文件路径!!

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        .small {
            position: relative;
        }
        .box img {
            vertical-align: top;
        }
        #bigBox>img {
            /*是让里面的图片脱标,为的就是让里面的图片进行一个移动*/
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div class="small" id="smallBox">
            <img src="../images/01.jpg" width="350" alt="" />
            <div class="mask" id="mask"></div>
        </div>
        <div class="big" id="bigBox">
            <img id="bigImg" src="../images/01.jpg" width="800" alt="" />
        </div>
    </div>
    <script>
        //1.获取元素
        let smallBox = document.getElementById('smallBox'); //小盒子
        let mask = document.getElementById('mask'); //遮罩
        let bigBox = document.getElementById('bigBox'); //大盒子
        let bigImg = document.getElementById('bigImg'); //大图片
        let box = document.getElementById('box'); //最外面box box的offsetLeft才是到body的距离
        //2.注册事件
        //2.1 鼠标移入
        smallBox.onmouseover = function () {
            //3.事件处理:显示big大图片盒子和mask遮罩盒子
            bigBox.style.display = 'block';
            mask.style.display = 'block';
        };
        //2.2 鼠标移出
        smallBox.onmouseout = function () {
            //3.事件处理:隐藏big大图片盒子和mask遮罩盒子
            bigBox.style.display = 'none';
            mask.style.display = 'none';
        };
        //2.3 鼠标移动
        smallBox.onmousemove = function (e) {
            e = e || window.event;
            //3.事件处理:
            //a.遮罩mask跟随鼠标移动
            let x = e.pageX - box.offsetLeft;
            let y = e.pageY - box.offsetTop;
            //b.鼠标在mask中心位置
            x -= mask.offsetWidth / 2;
            y -= mask.offsetHeight / 2;
            //边界检测
            x = x < 0 ? 0 : x;
            x = x > 175 ? 175 : x;
            y = y < 0 ? 0 : y;
            y = y > 175 ? 175 : y;
            mask.style.left = x + 'px';
            mask.style.top = y + 'px';
            //d.bigImg相应移动
            bigImg.style.left = -x * bigBox.offsetWidth / mask.offsetWidth + 'px';
            bigImg.style.top = -y * bigBox.offsetHeight / mask.offsetHeight + 'px';
        };
    </script>
</body>

</html>

 

 

标签:box,功能,放大镜,mask,style,js,let,bigBox,display
来源: https://www.cnblogs.com/xiaohanxqh/p/15588581.html