js做放大镜购物图片放大观察鼠标移动鼠标滚轮滚动键盘控制附详细代码及注释

最新推荐文章于 2024-05-03 11:47:20 发布

橧易灬

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量247

点赞数 1

分类专栏： HTML笔记 JavaScript 文章标签： javascript 前端 css3

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

版权

HTML笔记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

JavaScript

12 篇文章 0 订阅

订阅专栏

相较于上一篇文章,本次仅增加了鼠标滚轮的监听

oDiv.addEventListener(‘mousewheel’, function (e) {})在div中设置鼠标滚轮监听事件
当e.wheelDelta>0为上滚;
当e.wheelDelta>0为下滑;

<!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;
        let oPWidth;
        let oPHeight;
        pDaXiao();

        function pDaXiao() {
            //P的占位
            oP.style.width = oDivWidth / fangDa + 'px';
            oP.style.height = oDivHeight / fangDa + 'px';
            //p的占位
            oPWidth = oP.offsetWidth;
            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();


        })
        //鼠标滚轮监听事件
       oDiv.addEventListener('mousewheel', function (e) {
            if (e.wheelDelta > 0) {//如果鼠标滚轮为上滚
                fangDa *= 2;
                if (fangDa >= 25) {
                    fangDa = 25;//设置最大放大倍数
                }
                pDaXiao();
                fangDaJing();
            } else {//如果鼠标滚轮为下滚
                fangDa /= 2;
                if (fangDa <= 2) {
                    fangDa = 2;//设置最小放大倍数
                }
                pDaXiao();
                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>

橧易灬

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js做放大镜购物图片放大观察鼠标移动鼠标滚轮滚动键盘控制附详细代码及注释

相较于上一篇文章,本次仅增加了鼠标滚轮的监听oDiv.addEventListener(‘mousewheel’, function (e) {})在div中设置鼠标滚轮监听事件当e.wheelDelta>0为上滚;当e.wheelDelta>0为下滑;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-
复制链接

扫一扫