js版放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            overflow: hidden;
            width: 400px;
        }

        #left img {
            width: 400px;
            height:400px;
            display: block;
        }
        #left{
            width: 400px;
            height:400px;
        }

        #mask{
            width: 200px;
            height: 200px;
            background:white;
            opacity: 0.5;
            position: absolute;
            left: 0;
            top:0;
            display: none;
        }
        #right{
            background: url(../shiyanke1/photo/i.jpg) no-repeat;
            background-size: 800px 800px; /*注意遮罩层、图片、放大图片的宽高比例 1/2/4*/
            width: 400px;
            height: 400px;
            display: none;
            position: absolute;
            left: 400px;
            top:0;
        }
    </style>

</head>
<body>
<div id="box">
    <div id="left">
        <img src="../shiyanke1/photo/i.jpg" alt="">
        <div id="mask"></div>
    </div>
    <div id="right">
        <!--<img src="../shiyanke1/photo/i.jpg" alt="">-->
    </div>
</div>

<script>
    var oLeft=document.getElementById("left");
    var oRight=document.getElementById("right");
    var oMask=document.getElementById("mask");
    oLeft.onmouseover=function () { /*鼠标滑入 显示遮罩层和放大图片*/
        oMask.style.display="block";
        oRight.style.display="block";
    }
    oLeft.onmousemove=function (e) {  /*鼠标移动  遮罩层距离图片左边距离是鼠标X轴位置减去遮罩层宽度一半*/
        var left=e.clientX-oMask.offsetWidth/2;
        var top=e.clientY-oMask.offsetHeight/2;
        if (left<=0){ /*当left小于零时 left=0  防止左侧遮罩层溢出*/
            left=0;
        }
        var leftMax=oLeft.offsetWidth-oMask.offsetWidth;/*同理 右侧*/
        if(left>=leftMax){
            left=leftMax;
        }
        if (top<=0){/*同理 上侧*/
            top=0;
        }
        var topMax=oLeft.offsetHeight-oMask.offsetHeight;/*同理 下侧*/
        if(top>topMax){
            top=topMax;
        }
        oMask.style.left=left+"px";/*设置遮罩层left和top*/
        oMask.style.top=top+"px";

        var ratioX=left/leftMax;/*计算比例  移动的距离和可以移动距离的比例*/
        var ratioY=top/topMax;

        var bleft=ratioX*oRight.offsetWidth/*  本例子是二倍关系也可以直接left*2  */
        var btop=top*2;

        oRight.style.backgroundPositionX=-bleft+"px";/*设置放大图片的背景图片位置*/
        oRight.style.backgroundPositionY=-btop+"px";
    }
    oLeft.onmouseout=function () {/*鼠标滑出隐藏*/
        oMask.style.display="none";
        oRight.style.display="none";
    }
</script>
</body>
</html>
猜你喜欢
