JS 54 淘宝放大镜效果案例

最新推荐文章于 2022-07-02 13:39:35 发布

肝JOJO

最新推荐文章于 2022-07-02 13:39:35 发布

阅读量131

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/102674647

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

效果图下:
在这里插入图片描述
代码如下:

    <style>
        .preview_wrap{
            width: 400px;
            height: 590px;
        }
        .preview_img{
            position: relative;
            height: 398px;
            width: 500px;
            border: 1px solid #ccc;   
        }
        .mask{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: blue;
            opacity: .4;
            /* 透明效果 */
            border: 1px solid #ccc;
            cursor: move;
        }
        img{
            height: 398px;;
        }
        .big{
            width: 500px;
            height: 500px;
            background-color: pink;
            position: absolute;
            left:506px ;
            top: 0px;
            z-index: 999;
            /* 层级调高 */
            display: none;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        .big img{
            position: absolute;
            top: 0;
            left: 0;
            height: 800px;
        }
    </style>

        window.onload=function(){
            //1.鼠标经过离开时,显示隐藏遮挡层和大图
            var preview_img=document.querySelector('.preview_img');
            var mask=document.querySelector('.mask');
            var big=document.querySelector('.big');
            preview_img.addEventListener('mouseover',function(){
                mask.style.display='block';
                big.style.display='block';               
            })
            preview_img.addEventListener('mouseout',function(){
                mask.style.display='none';
                big.style.display='none';
            })
            //2.把鼠标在盒子内的坐标给遮挡层,让遮挡层随着鼠标移动
            preview_img.addEventListener('mousemove',function(e){
                //2.1计算鼠标在盒子内的坐标
                var x=e.pageX - this.offsetLeft;
                var y=e.pageY - this.offsetTop;
                //2.2鼠标在遮挡层中间,此时遮挡层的坐标
                var maskX=x - mask.offsetWidth/2;
                var maskY=y - mask.offsetHeight/2;
                //2.2.1遮挡层x y的最大坐标
                var maxX=preview_img.offsetWidth-mask.offsetWidth;
                var maxY=preview_img.offsetHeight-mask.offsetHeight;
                //2.3如果x坐标小于0,就让它停在0的位置
                if(maskX <= 0){
                    maskX = 0;
                //2.4如果x坐标大于 盒子宽-遮挡层宽,则停在此位置     
                }else if(maskX >= maxX){
                    maskX = maxX;
                }
                //2.5如果y坐标小于0,就让它停在0的位置
                if(maskY <= 0){
                    maskY = 0;
                //2.6如果y坐标大于 盒子高-遮挡层高,则停在此位置     
                }else if(maskY >= maxY){
                    maskY=maxY;
                }
                mask.style.left=maskX + 'px';
                mask.style.top=maskY + 'px';
            /*
            3.让大盒子图片随着遮挡层移动而移动
                遮挡层移动距离(maskX,Y)/遮挡层最大移动距离(maxX,Y) = 大图片移动距离/大图片最大移动距离
                大图片移动距离=遮挡层移动距离(maskX,Y)*大图片最大移动距离/遮挡层最大移动距离(maxX,Y)      
            */
                var bigImg=document.querySelector('.bigImg');  //大图
            //3.1 大图移动的最大距离
                var bigmaxX=bigImg.offsetWidth - big.offsetWidth;
                var bigmaxY=bigImg.offsetHeight - big.offsetHeight;
            //3.2 大图的坐标
                var bigX=maskX * bigmaxX / maxX;
                var bigY=maskY * bigmaxY / maxY;
                bigImg.style.left=-bigX + 'px';
                bigImg.style.top=-bigY + 'px';                
            })

        }

<body>
    <div class="preview_warp f1">
        <div class="preview_img">
            <img src="img/一加7p.png" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="img/一加7p.png" alt="" class="bigImg">
            </div>
        </div>      
    </div>   
</body>