js放大镜案例（非组件）

最新推荐文章于 2022-09-22 20:00:08 发布

兔子爱萝卜@

最新推荐文章于 2022-09-22 20:00:08 发布

阅读量96

点赞数

文章标签：前端 javascript css html

本文链接：https://blog.csdn.net/FG_1314/article/details/124726840

版权

相对于目前的前端技术而言，js是一个绕不过去的一门语言所以一般情况下都是使用的js代码做的一些案例。

下面看代码：

<!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>

<body>
    <!DOCTYPE html>
    <html lang='en'>

    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <title>Document</title>
        <style>
            /* 一、先设置两个大小同等的盒子，放入图片。
            1、要求1张小
            2、一张大图
            二、在第一个盒子里设置一个小盒子 
            要求：
            1、小盒子显示的内容，第二个大盒子的内容一样
            2、移动小盒子第二个大盒子的内容一样显示放大的小盒子内容。
*/
/*
做法：
1、获取两个第一个大盒子的元素、小盒子的元素同时鼠标的位置信息，并添加判断让鼠标居中在小盒子的中心点。
2、计算图片的比例大小并完成相应的内容编辑。

*/
/*  */
            div {
                float: left;
                margin-left: 20px;
            }

            div.small {
                width: 130px;
                height: 130px;
                position: relative;
                overflow: hidden;
            }

            div.small img {
                width: 100%;
                height: 100%;
            }

            div span {
                position: absolute;
                width: 26px;
                height: 26px;
                background: #000;
                opacity: 0.5;
                left: 0;
                cursor: move;
                display: none;
            }

            div.big {
                width: 130px;
                height: 130px;
                border: 1px solid #000;
                overflow: hidden;
                display: none;
                position: relative;
            }

            .big img {

                position: absolute;
            }
        </style>
    </head>

    <body>

        <div class="small">
            <span></span>
            <img src="./img/小图女装.jpg" alt="">

        </div>
        <div class="big">
            <img src="./img/大图女装.jpg" alt="">
        </div>
        <script>
            //获取第一个大盒子
            var smallBox = document.querySelector('.small')
            //获取第二个大盒子
            var bigBox = document.querySelector('.big')
            //1、获取元素 span小盒子
            var moveBox = document.querySelector('span')
            //获取第二个大盒子里的img
            var bigImg = document.querySelector('.big img')

            //2、添加滑上  第一个大盒子鼠标划入出现小盒子和第二大盒子
            smallBox.onmouseover = function () {
                moveBox.style.display = 'block'
                bigBox.style.display = 'block'
            }
            //添加滑离  第一个大盒子鼠标划入消失小盒子和第二大盒子
            smallBox.onmouseout = function () {
                moveBox.style.display = 'none'
                bigBox.style.display = 'none'
            }

            //3、添加大盒子鼠标移入事件  小盒子跟随鼠标移动并且鼠标在小盒子中心
            // 小盒子的移动距离是第二大盒子的图片比例移动距离
            //鼠标离开div的高宽大小小盒子消失 （限制小盒子的移动范围）  
            smallBox.onmousemove = function (ev) {
                var e = window.event || ev
                // console.log(e.clientX);
                // console.log(e.clientY);
                // 给span的left 和top赋值
                console.log(bigBox.offsetTop);

                var moveX = (e.clientX - smallBox.offsetLeft - (moveBox.clientWidth / 2))
                var moveY = (e.clientY - smallBox.offsetTop - (moveBox.clientHeight / 2))
                //限制移动盒子的范围
                if (moveX < 0) {
                    moveX = 0
                }
                if (moveX >= bigBox.clientWidth - moveBox.clientWidth) {
                    moveX = bigBox.clientWidth - moveBox.clientWidth
                }
                if (moveY < 0) {
                    moveY = 0
                }
                if (moveY >= bigBox.clientHeight - moveBox.clientHeight) {
                    moveY = bigBox.clientHeight - moveBox.clientHeight
                }
                // 大图片的移动
                bigImg.style.left = -(moveX * 80 / 13) + 'px'
                bigImg.style.top = -(moveY * 80 / 13) + 'px'
                //移动盒子的移动
                moveBox.style.left = moveX + 'px'
                moveBox.style.top = moveY + 'px'
            }


            /*      
                移动盒子
                left ：0     img：left 0
                left：130px  img :left  -800px
                // left: 10px   img :left   x =   - 80/13
                

                y px  img left: y* - 80/13
             */
        </script>
    </body>

    </html>
</body>

</html>