Web API---仿京东放大镜

最新推荐文章于 2023-03-16 11:23:42 发布

香菜xc

最新推荐文章于 2023-03-16 11:23:42 发布

阅读量129

点赞数

分类专栏：前端文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_44302255/article/details/119985736

版权

前端专栏收录该内容

47 篇文章 1 订阅

订阅专栏

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        img {
            border: 0;
            vertical-align: middle;
        }

        .pre {
            position: relative;
            height: 400px;
            width: 400px;
            border: 1px solid #ccc;
            margin-left: 20px;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: yellow;
            opacity: .5;
            border: 1px solid #ccc;
            cursor: move;
        }

        .big {
            display: none;
            position: absolute;
            left: 410px;
            top: 0;
            width: 500px;
            height: 500px;
            background-color: pink;
            z-index: 999;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        .bigImg {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="pre">
        <img src="./img/s3.png" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="./img/big.jpg" alt="" class="bigImg">
        </div>
    </div>

    <script>
        // 1. 整个案例可以分为三个功能模块
        var pre = document.querySelector('.pre')
        var mask = document.querySelector('.mask')
        var big = document.querySelector('.big')
        var bigImg = document.querySelector('.bigImg')


        // 2. 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能
        pre.onmouseenter = function () {
            mask.style.display = 'block'
            big.style.display = 'block'
        }
        pre.onmouseleave = function () {
            mask.style.display = 'none'
            big.style.display = 'none'
        }

        // 3. 黄色的遮挡层跟随鼠标功能。
        pre.onmousemove = function (e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            //鼠标在盒子内的坐标
            console.log(x, y);
            // mask移动的距离
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            // mask的最大移动距离
            var maskMax = pre.offsetWidth - mask.offsetWidth;
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskMax) {
                maskX = maskMax
            }
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskMax) {
                maskY = maskMax
            }

            mask.style.left = maskX + 'px'
            mask.style.top = maskY + 'px'
            // 4. 移动黄色遮挡层，大图片跟随移动功能。
            // 大图片的移动距离 / 大图片最大移动距离=mask的移动距离 / mask的最大移动距离
            var bigMax = bigImg.offsetWidth - big.offsetWidth;
            // 大图片的移动距离
            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax / maskMax;
            bigImg.style.left = -bigX + 'px'
            bigImg.style.top = -bigY + 'px'

        }



    </script>
</body>

</html>