京东商品移动放大镜效果

最新推荐文章于 2022-03-15 17:21:24 发布

sword_chiu

最新推荐文章于 2022-03-15 17:21:24 发布

阅读量188

点赞数

文章标签： css javascript css3

本文链接：https://blog.csdn.net/sword_chiu/article/details/107054230

版权

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .big {
            position: relative;
            margin-left: 50px;
            margin-top: 50px;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            background: url(s3.png) no-repeat center center;
        }

        .small {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: peru;
            opacity: .3;
        }

        .img {
            /* display: none; */
            position: absolute;
            left: 350px;
            top: 0;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        img {
            position: absolute;
            left: 0;
            right: 0;
        }
    </style>
    <script>
        window.addEventListener('load', function () {
            var big = document.querySelector('.big');
            var small = document.querySelector('.small');
            var img = document.querySelector('img');
            big.addEventListener('mouseover', function () {
                small.style.display = 'block';
                img.style.display = 'block';
            })
            big.addEventListener('mouseout', function () {
                small.style.display = 'none';
                img.style.display = 'none'
            })
            document.addEventListener('mousemove', function (e) {
                var x = e.pageX - big.offsetLeft; //鼠标到左框的距离
                var y = e.pageY - big.offsetTop; //鼠标到上框的距离
                var smallx = x - small.offsetWidth / 2 //内盒到外盒左边框的距离
                var smally = y - small.offsetHeight / 2 //内盒到外盒上边框的距离
                var maxx = big.offsetWidth - small.offsetWidth; //最多移动距离x
                var maxy = big.offsetHeight - small.offsetHeight; //最多移动距离y
                if (smallx <= 0) {
                    smallx = 0 //如果内盒到左边的移动距离小于0，就让这个距离等于0
                } else if (smallx >= maxx) {
                    smallx = maxx //如果距离大于最大距离，就让这个距离等于最大移动距离
                }
                if (smally <= 0) {
                    smally = 0
                } else if (smally >= maxy) {
                    smally = maxy;
                }
                small.style.left = smallx + 'px'; //把距离赋给small
                small.style.top = smally + 'px';
                //-------------------------------以下是放大的图片的位移代码
                var imgx = smallx * img.offsetWidth / small.offsetWidth;
                var imgy = smally * img.offsetHeight / small.offsetHeight;
                img.style.left = -imgx + 'px';
                img.style.top = -imgy + 'px';
            })
        })
    </script>
</head>

<body>
    <div class="big">
        <div class="small"></div>
    </div class="big">
    <div class="img">
        <img src="big.jpg" alt="">
    </div>
</body>

</html>

以下是图片素材：
在这里插入图片描述

sword_chiu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
京东商品移动放大镜效果

效果图：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .big { position: rel
复制链接

扫一扫