放大镜/鼠标移入放大 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>放大镜</title>
</head>
<style>
.box{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}
.box img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.box1{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
}
.hand{
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 100, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
.bigbox{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 303px;
    overflow: hidden;
}
.bigbox img{
    display: none;

    position: absolute;
    left: 0;
    top: 0;
    width: 900px;
    height: 900px;
}
</style>
<body>
    <div class="box">
        <img src="jujingyi.jpg" alt="">
        <div class="box1"></div>
        <div class="hand"></div>
    </div>
    <div class="bigbox">
        <img src="jujingyi.jpg" alt="">
    </div>
</body>
</html>
<script>
            let box=document.querySelector(".box");
            let box1=document.querySelector(".box1");
            let hand=document.querySelector(".hand");
            let bigbox=document.querySelector(".bigbox img");
            box.onmouseenter=function(){   //鼠标移入抓手（蓝色）和右边图片显示
            hand.style.display="block";
            bigbox.style.display="block";
            box1.onmousemove=function(event){//事件移动
            let x0=hand.offsetWidth/2;   //鼠标距离抓手hand的边框距离中心
            let y0=hand.offsetHeight/2; 
            let x1=event.clientX;   //鼠标距离页面左边的距离
            let y1=event.clientY;//鼠标距离页面上面的距离
            let left=x1-x0;   //抓手盒子距离页面左边的距离
            let top=y1-y0;//抓手盒子距离页面右边的距离
                if(left<0){   //判断条件  使抓手盒子不离开放图片的盒子
                    left=0;
                }
                if(top<0){
                    top=0;
                }
                if(top>200){
                    top=200;
                }
                if(left>200){
                    left=200
                }
                hand.style.left=left+"px";   //抓手盒子随鼠标移动的位置
                hand.style.top=top+"px";
                bigbox.style.left=-left*3+"px";   //右边图片放大三倍随鼠标移动实时变化
                bigbox.style.top=-top*3+"px";
            }
            }
            box.onmouseleave=function(){   //鼠标离开左边放图片的盒子  抓手和右边放大图片都消失
                hand.style.display="none";  
                bigbox.style.display="none";
            }
</script>

 

posted @ 2019-03-18 14:35  AloneInDefeat  阅读(398)  评论(0)    收藏  举报