前端商品放大镜效果的实现（JS/DOM）

最新推荐文章于 2024-05-15 16:59:24 发布

IlPoppylI

最新推荐文章于 2024-05-15 16:59:24 发布

阅读量924

点赞数 2

文章标签： windows 前端 javascript

本文链接：https://blog.csdn.net/IlPoppylI/article/details/123313978

版权

前端商品放大镜效果的实现

1.预期效果

    效果描述：当鼠标在商品上时，显示商品的放大图，并使其跟随鼠标移

2.代码实现

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .preview {
            position: relative;
            height: 398px;
            width: 398px;
            border: 1px solid gainsboro;
            margin: 100px 100px;
        }
        .preview img {
            position: absolute;
            top: 0;
            left: 0;
        }
        .preview .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            height: 200px;
            width: 200px;
            background-color: rgba(255, 255, 0, 0.493);
            cursor: move;
        }
        .preview .enlarge {
            display: none;
            position: absolute;
            top: 0;
            left: 410px;
            overflow: hidden;
            width: 500px;
            height: 500px;
            border: 1px solid gainsboro;
            z-index: 99;
        }
        .preview .enlarge img {
            position: absolute;
            top: 0;
            left: 0;
        } 
    </style>
</head>
<body>
    <div class="preview">
        <img src="images/s3.png">   <!--使用时需要自己引入图片-->
        <div class="mask"></div>
        <div class="enlarge">
            <img src="images/big.jpg" class="enlarge_img">   <!--使用时需要自己引入图片-->
        </div>
    </div>
    <script>
        var preview = document.querySelector('.preview');
        var mask = document.querySelector('.mask');
        var enlarge = document.querySelector('.enlarge');
        var enlarge_img = document.querySelector('.enlarge_img');
        //鼠标经过商品图时触发事件
        preview.addEventListener('mouseover',function(e){
            //1.显示遮罩层
            mask.style.display = 'block';
            //2.显示放大商品图
            enlarge.style.display = 'block';

            //鼠标在商品图中移动时触发事件
            preview.addEventListener('mousemove',function(e){
                //1.遮罩层跟随鼠标移动
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                var moveX = x - mask.offsetWidth/2;
                var moveY = y - mask.offsetHeight/2;
                //加判断条件，防止遮罩层溢出
                if(moveX <= 0){
                    moveX = 0;
                }else if (moveX >= (preview.offsetWidth - mask.offsetWidth)){
                    moveX = preview.offsetWidth - mask.offsetWidth;
                }
                if(moveY <= 0){
                    moveY = 0;
                }else if (moveY >= (preview.offsetHeight - mask.offsetHeight)){
                    moveY = preview.offsetHeight - mask.offsetHeight;
                }
                mask.style.left = moveX + 'px';
                mask.style.top = moveY + 'px';
                //2.大图片跟着移动
                var maskMax = preview.offsetWidth - mask.offsetWidth;
                var enlargeMax = enlarge_img.offsetWidth - enlarge.offsetWidth;
                //通过比例关系计算大图片移动距离  大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
                var enlargeMoveX = (moveX * enlargeMax)/maskMax;
                var enlargeMoveY = (moveY * enlargeMax)/maskMax;
                enlarge_img.style.left = -enlargeMoveX + 'px';
                enlarge_img.style.top = -enlargeMoveY + 'px';
            });
        });
        //鼠标离开商品图时触发事件
        preview.addEventListener('mouseout',function(){
            //1.隐藏遮罩层
            mask.style.display = 'none';
            //2.隐藏放大商品图
            enlarge.style.display = 'none';
        })
    </script>
</body>
</html>