原生JS实现放大镜效果

最新推荐文章于 2021-11-28 22:42:05 发布

一只不太聪明的燕子

最新推荐文章于 2021-11-28 22:42:05 发布

阅读量246

点赞数 1

分类专栏： JavaScript css3 web前端文章标签： js javascript css

本文链接：https://blog.csdn.net/weixin_42678796/article/details/107237803

版权

web前端同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

css3

12 篇文章 0 订阅

订阅专栏

效果：

在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 600px;
            height: 400px;
            background-image: url(./image/b4.jpg);
            background-size: 600px 400px;
            position: relative;
        }
        #mirror{
            width: 150px;
            height: 150px;
            background-color: pink;
            position: absolute;
            left: 100px;
            top: 100px;
            opacity: 0.3;
        }
        #show{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: absolute;
            left: 620px;
            top: 0;
            background-image: url(./image/b4.jpg);
            background-size: 1200px 800px;
            background-position: -100px -100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="mirror"></div>
        <div id="show"></div>
    </div>

    <script>
        //获取dom元素
        let oBox = document.getElementById('box');
        let oMirror = document.getElementById('mirror');
        let oShow = document.getElementById('show');

        let boxOffsetLeft = oBox.offsetLeft;  //获取box距离页面左边的距离
        let boxOffsetTop = oBox.offsetTop;  //获取box距离页面上边的距离
        let mirrorWidth = oMirror.offsetWidth;   //获取放大镜的宽度 
        let mirrorHeight = oMirror.offsetHeight;   //获取放大镜的高度

        //给box绑定onmousemove事件，在鼠标移动时，让放大镜跟着鼠标走
        oBox.onmousemove = function(event){
            let e = event || window.event;   //获取事件对象

            // 一、数据处理
            //1.计算放大镜应该出现的位置
            //鼠标距离页面的距离-box距离页面的距离-放大镜的宽高一半
            let left1 = e.pageX - boxOffsetLeft - mirrorWidth/2;
            let top1 = e.pageY - boxOffsetTop - mirrorHeight/2;
            //2.边界处理
            if(left1<0){  //左边界
                left1 = 0;
            }else if(left1+mirrorWidth>600){  //右边界
                left1 = 600 - mirrorWidth;
            }

            if(top1<0){
                top1 = 0;  //上边界
            }else if(top1+mirrorHeight>400){   //下边界
                top1 = 400 - mirrorHeight;
            }

            // 二、外观呈现
            //1.移动放大镜(移动鼠标)
            oMirror.style.left = left1 + "px";
            oMirror.style.top = top1 + "px";
            //2.呈现放大的区域（改变show的背景图位置）
            oShow.style.backgroundPosition = `-${left1*2}px -${top1*2}px`;
        }
    </script>
</body>
</html>