放大镜小案例_JavaScript

来源：互联网发布：python http api接口编辑：程序博客网时间：2024/05/21 17:29
<!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.onmousemove= 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.onmouseleave= function () {            move.style.display='none';            document.querySelector('.bigImg').style.display='none';        };    </script></body></html>
阅读全文
0 0