京东详情放大镜效果

最新推荐文章于 2024-05-19 02:32:57 发布

Wengyd_

最新推荐文章于 2024-05-19 02:32:57 发布

阅读量79

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Wengyd_/article/details/124409825

版权

在这里插入图片描述

<!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>
        .fdj {
            position: relative;
            width: 260px;
            height: 260px;
        }
        .fdj img {
            width: 200px;
            height: 200px;
            padding: 30px 30px ;
            border: rgb(139, 138, 138) solid 1px;
            
        }
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
            background-color: rgb(243, 202, 70) ;
            opacity: 0.5;
            cursor: move;
        }
        .big {
            display: none;
            position: absolute;
            width: 600px;
            height: 600px;
            left: 270px;
            top: 0;
            overflow: hidden;
            /* background-color: aquamarine; */
            z-index: 999;
        }
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="fdj">
        <img src="../images/4.png" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="../images/4.png" alt="" style="width: 400px; height: 400px;" class="bigImg">
        </div>
    </div>
    <script>
        window.addEventListener('load', function(){
            var fdj = document.querySelector('.fdj');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
            //1.当我们鼠标经过 fdj 就显示和隐藏 mask 遮挡层 和 big
            fdj.addEventListener('mouseover', function(){
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            fdj.addEventListener('mouseout', function(){
                mask.style.display = 'none';
                big.style.display = 'none';
            })

            //2.鼠标移动的时候,让黄色的盒子跟着鼠标来走
             fdj.addEventListener('mousemove', function(e){
                //(1)先计算鼠标在盒子内坐标
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                //(2) 盒子高度的一半
                // mask.style.left = x - 75 +'px';
                // mask.style.top = y - 75 +'px';

                //(3) mask移动的距离
                var maskX = x - mask.offsetWidth / 2;
                var maskY = y - mask.offsetHeight / 2;

                //(4) 如果x坐标小于了0 就让他停在0的位置
                var maskMax = fdj.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';

                //3. 大图片的移动距离=遮挡层移动距离 *大图片最大移动距离/遮挡层的最大移动距离
                var bigImg = document.querySelector('.bigImg');
                //大图片最大移动距离
                var bigMax = bigImg.offsetWidth-big.offsetWidth;
                //大图片的移动距离 X Y 
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskX * bigMax / maskMax;
                bigImg.style.left = bigX + 'px';
                bigImg.style.top = bigY + 'px';
            })
        })
    </script>
</body>
</html>