放大镜小案例_JavaScript 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>放大镜案例</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            position: relative;
            float: left;
            left: 100px;
            top: 100px;
        }
        .bigImg{
            float: left;
            width: 400px;
            height: 400px;
            position: relative;
            left: 160px;
            top: 100px;
            overflow: hidden;
            display: none;
        }
        .bigImg>img{
            position: absolute;
            width: 2400px;
            height: 2400px;

        }
        .move{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: rgba(47,177,209,.4);
            display: none;
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="img/timg.jpg" alt=""/>
        <div class="move"></div>
    </div>
    <div class="bigImg">
        <img src="img/timg.jpg" alt="" id="big"/>
    </div>
    <script>
        var box=document.querySelector('.box');
        var move=document.querySelector('.move');
        var bigImg=document.querySelector('#big');
        box.οnmοusemοve= function () {
            move.style.display='block';
            document.querySelector('.bigImg').style.display='block';
            var clientX=event.clientX;
            var clientY=event.clientY;
            var bX=box.offsetLeft;
            var bY=box.offsetTop;
            console.log(box.offsetWidth);
            console.log(move.offsetWidth);
//            判断最左边边界
            if(clientX-bX<Math.floor(move.offsetWidth/2)){
                clientX=bX+Math.floor(move.offsetWidth/2);
            }
//            判断最右边边界
            if(clientX-bX-Math.floor(move.offsetWidth/2)>box.offsetWidth-move.offsetWidth){
                clientX=box.offsetWidth+Math.floor(move.offsetWidth/2);
            }
//            top边界
            if(clientY-bY<Math.floor(move.offsetHeight/2)){
                clientY=bY+Math.floor(move.offsetHeight/2);
            }
            判断bottom边界
            if(clientY-bY>box.offsetHeight-move.offsetHeight/2){
                clientY=box.offsetHeight+Math.floor(move.offsetHeight/2);
            }
            move.style.top=clientY-bY-Math.floor(move.offsetHeight/2)+'px';
            move.style.left=clientX-bX-Math.floor(move.offsetWidth/2)+'px';
//            在放大镜移动时，大的图片也要移动相应比例，移动方向相反
            var move_x=(clientX-bX-Math.floor(move.offsetWidth/2))/(box.offsetWidth-move.offsetWidth);
            var move_y=(clientY-bY-Math.floor(move.offsetHeight/2))/(box.offsetHeight-move.offsetHeight);
            var bigDiv_x=document.querySelector('.bigImg').offsetWidth;
            var bigDiv_y=document.querySelector('.bigImg').offsetHeight;

            bigImg.style.left=(bigImg.offsetWidth-bigDiv_x)*(-move_x)+'px';
            bigImg.style.top=(-move_y)*(bigImg.offsetHeight-bigDiv_y)+'px';
        };
        box.οnmοuseleave= function () {
            move.style.display='none';
            document.querySelector('.bigImg').style.display='none';
        };
    </script>
</body>
</html>

posted @ 2022-03-27 15:16  crystal_lemon  阅读(6)  评论(0)    收藏  举报  来源