js JavaScript2种做放大镜方式包含鼠标移动以及键盘控制 js+html+css 可自定义放大比例附详细代码注释

本文链接：https://blog.csdn.net/weixin_56667794/article/details/122564233

js JavaScript2种做放大镜方式包含鼠标移动以及键盘控制 js+html+css 可自定义放大比例附详细代码注释

放大镜核心原理
插入图片格式详细代码
插入背景图格式详细代码

放大镜核心原理

1.新的盒子大小/所需放大区域大小=放大比例=新盒子里的图片大小/旧盒子里原图大小
2.所需放大的盒子移动多少*放大比例=新盒子里图片所需移动比例
3.新的盒子给溢出隐藏,

插入图片格式详细代码

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;

    }

    div {
        width: 600px;
        height: 600px;
        border: 30px solid #000;
        float: left;
        padding: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    div .normal {
        display: block;
        width: 660px;
        height: 660px;
    }

    p {
        width: 150px;
        height: 150px;
        background-color: rgba(255, 157, 0, 0.466);
        position: absolute;
        top: 0;
        left: 0;
    }

    h1 {
        width: 660px;
        height: 660px;
        border: 2px solid #000;
        position: absolute;
        left: 720px;
        top: 0;
        display: none;
        border: 30px solid #000;
        overflow: hidden;
    }

    .biger {
        display: block;
    }

    body {
        overflow: hidden;
    }
</style>

<body>
    <div>
        <img src="./images/4.jpg" alt="" class="normal">
        <p></p>
    </div>
    <h1><img src="./images/4.jpg" alt="" class="biger"></h1>
    <script>
        const oDiv = document.querySelector('div');
        const oP = document.querySelector('p');
        const oH1 = document.querySelector('h1');
        const oNormal = document.querySelector('.normal');
        const oBiger = document.querySelector('.biger');
        //DIV距离页面的距离
        let oDivLeft = oDiv.offsetLeft;
        let oDivTop = oDiv.offsetTop;
        //div的内部占位(padding+width)
        let oDivWidth = oDiv.clientWidth;
        let oDivHeight = oDiv.clientHeight;
        //div的边框线
        let oDivBorderX = oDiv.clientLeft;
        let oDivBorderY = oDiv.clientTop;
        //定义放大比例
        let fangDa = 5;
        //P的占位
        oP.style.width = oDivWidth / fangDa + 'px';
        oP.style.height = oDivHeight / fangDa + 'px';
        //p的占位
        let oPWidth = oP.offsetWidth;
        let oPHeight = oP.offsetHeight;


        //页面大小监听事件
        window.addEventListener('resize', function () {
            //DIV距离页面的距离
            oDivLeft = oDiv.offsetLeft;
            oDivTop = oDiv.offsetTop;
            //div的内部占位(padding+width)
            oDivWidth = oDiv.clientWidth;
            oDivHeight = oDiv.clientHeight;
            //div的边框线
            oDivBorderX = oDiv.clientLeft;
            oDivBorderY = oDiv.clientTop;
            //P的占位
            oPWidth = oP.offsetWidth;
            oPHeight = oP.offsetHeight;
        })
        oDiv.addEventListener('mouseenter', function () {
            oH1.style.display = 'block';
        })
        oDiv.addEventListener('mouseleave', function () {
            oH1.style.display = 'none';
        })
        //设置鼠标点击监听事件
        oDiv.addEventListener('mousemove', function (e) {

            //点击之后的p的位置
            //点击位置的-div左侧外边距-div的边界-p的占位一半
            let x = e.pageX - oDivLeft - oDivBorderX - oPWidth / 2;
            let y = e.pageY - oDivTop - oDivBorderY - oPHeight / 2;
            //判断极值
            //最小值
            x = x < 0 ? 0 : x;
            y = y < 0 ? 0 : y;
            //最大值
            x = x > oDivWidth - oPWidth ? oDivWidth - oPWidth : x;
            y = y > oDivHeight - oPHeight ? oDivHeight - oPHeight : y;

            //赋值
            oP.style.left = x + 'px';
            oP.style.top = y + 'px';
            fangDaJing();


        })
        //键盘监听事件
        document.addEventListener('keydown', function (e) {
            let oPNowTop = parseInt(window.getComputedStyle(oP).top);
            let oPNowLeft = parseInt(window.getComputedStyle(oP).left);
            if (e.keyCode === 37) {
                oPNowLeft -= 5;
                oP.style.left = oPNowLeft < 0 ? 0 : oPNowLeft + 'px';
                fangDaJing();
            }
            if (e.keyCode === 38) {
                oPNowTop -= 5;
                oP.style.top = oPNowTop < 0 ? 0 : oPNowTop + 'px';
                fangDaJing();
            }
            if (e.keyCode === 39) {
                oPNowLeft += 5;
                oP.style.left = oPNowLeft > oDivWidth - oPWidth ? oDivWidth - oPWidth : oPNowLeft + 'px'
                fangDaJing();
            }
            if (e.keyCode === 40) {
                oPNowTop += 5;
                oP.style.top = oPNowTop > oDivHeight - oPHeight ? oDivHeight - oPHeight : oPNowTop + 'px';
                fangDaJing();
            }
        })

        function fangDaJing() {
            let oPNowTop = parseInt(window.getComputedStyle(oP).top);
            let oPNowLeft = parseInt(window.getComputedStyle(oP).left);
            //img变化后的宽度
            oBiger.style.width = fangDa * oDivWidth + 'px';
            oBiger.style.height = fangDa * oDivHeight + 'px';

            oBiger.style.marginTop = -fangDa * oPNowTop + 'px';
            oBiger.style.marginLeft = -fangDa * oPNowLeft + 'px';
        }
    </script>
</body>

</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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;

    }
    body {
        overflow: hidden;
    }

    div {
        width: 600px;
        height: 600px;
        background: url(./images/5.jpg) no-repeat;
        background-size: 100% 100%;
        border: 30px solid #000;
        float: left;
        padding: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    p {
        width: 95px;
        height: 95px;
        background-color: rgba(229, 255, 0, 0.493);
        /* padding: 35px; */
        /* display: none; */
        position: absolute;
        top: 0;
        left: 0;
    }

    h1 {
        width: 600px;
        height: 600px;
        padding: 30px;
        border: 30px solid #000;
        background: url(./images/5.jpg) no-repeat;
        float: left;
    }

   
</style>

<body>
    <div>
        <p></p>
    </div>
    <h1></h1>
    <script>
        const oDiv = document.querySelector('div');
        const oP = document.querySelector('p');
        const oH1 = document.querySelector('h1');
        //DIV距离页面的距离
        let oDivLeft = oDiv.offsetLeft;
        let oDivTop = oDiv.offsetTop;
        //div的内部占位(padding+width)
        let oDivWidth = oDiv.clientWidth;
        let oDivHeight = oDiv.clientHeight;
        //div的边框线
        let oDivBorderX = oDiv.clientLeft;
        let oDivBorderY = oDiv.clientTop;
        //在这里选择放大倍数
        let fangDa=200;
        //P的占位
        oP.style.width=oDivWidth/fangDa+'px';
        oP.style.height=oDivHeight/fangDa+'px';
        let oPWidth = oP.offsetWidth;
        let oPHeight = oP.offsetHeight;
       


        //页面大小监听事件
        window.addEventListener('resize', function () {
            //DIV距离页面的距离
            oDivLeft = oDiv.offsetLeft;
            oDivTop = oDiv.offsetTop;
            //div的内部占位(padding+width)
            oDivWidth = oDiv.clientWidth;
            oDivHeight = oDiv.clientHeight;
            //div的边框线
            oDivBorderX = oDiv.clientLeft;
            oDivBorderY = oDiv.clientTop;
            //P的占位
            oPWidth = oP.offsetWidth;
            oPHeight = oP.offsetHeight;
        })

        //设置鼠标点击监听事件
        oDiv.addEventListener('mousemove', function (e) {
            //点击之后的p的位置
            //点击位置的-div左侧外边距-div的边界-p的占位一半
            let x = e.pageX - oDivLeft - oDivBorderX - oPWidth / 2;
            let y = e.pageY - oDivTop - oDivBorderY - oPHeight / 2;
            //判断极值
            //最小值
            x = x < 0 ? 0 : x;
            y = y < 0 ? 0 : y;
            //最大值
            x = x > oDivWidth - oPWidth ? oDivWidth - oPWidth : x;
            y = y > oDivHeight - oPHeight ? oDivHeight - oPHeight : y;
            //赋值
            oP.style.left = x + 'px';
            oP.style.top = y + 'px';
            oH1.style.backgroundSize=`${100*fangDa}% ${100*fangDa}%`
            fangDaJing()
        })
        //键盘监听事件
        document.addEventListener('keydown', function (e) {
            let oPNowTop = parseInt(window.getComputedStyle(oP).top);
            let oPNowLeft = parseInt(window.getComputedStyle(oP).left);
            if (e.keyCode === 37) {
                oPNowLeft -= 5;
                oP.style.left = oPNowLeft < 0 ? 0 : oPNowLeft + 'px';
                fangDaJing() }
            if (e.keyCode === 38) {
                oPNowTop -= 5;
                oP.style.top = oPNowTop < 0 ? 0 : oPNowTop + 'px';
                fangDaJing()}
            if (e.keyCode === 39) {
                oPNowLeft += 5;
                oP.style.left = oPNowLeft > oDivWidth - oPWidth ? oDivWidth - oPWidth : oPNowLeft + 'px';
                fangDaJing()}
            if (e.keyCode === 40) {
                oPNowTop += 5;
                oP.style.top = oPNowTop > oDivHeight - oPHeight ? oDivHeight - oPHeight : oPNowTop + 'px';
                fangDaJing()
            }
        })
        //h1放大镜
        function fangDaJing() {
            let oPNowTop = parseInt(window.getComputedStyle(oP).top);
            let oPNowLeft = parseInt(window.getComputedStyle(oP).left);
            oH1.style.backgroundPositionY = -fangDa * oPNowTop + 'px';
            oH1.style.backgroundPositionX = -fangDa * oPNowLeft + 'px';
        }
    </script>
</body>

</html>