放大镜

Author Avatar
七星泪脉 Jul 25, 2016

最为基础的放大镜的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .zuo{
            width: 430px;
            height: 430px;
            background:url("of.jpg")no-repeat;
            float: left;
            border:1px solid rebeccapurple;
        }
        .div1{
            width: 215px;
            height: 215px;
            background:rgba(0,0,0,0.3);
        }

        .div2{
            width: 430px;
            height: 430px;
            border:1px solid orangered;
            float: left;
            overflow:hidden;
        }
        .you{
               width:860px;
            height:860px;
            /*background:url("of.jpg")no-repeat;*/
            /*background-size:100%;*/
        }
    </style>
</head>
<body>
    <div class="zuo">
        <div class="div1"></div>
    </div>
    <div class="div2"><div class="you"></div></div>
    <script>
        var ZUO = document.querySelector(".zuo");
        var YOU = document.querySelector(".you");
        var DIV1 = document.querySelector(".div1");
        var DIV2 = document.querySelector(".div2");
            ZUO.onmousemove = function(event){
            var oevent = event || window.event;
            var x = oevent.clientX;
            var y = oevent.clientY;
            var fun1 = x-parseInt(DIV1.offsetWidth/2);    
            var fun2 = parseInt(DIV1.offsetWidth/2);
            var num1 = ZUO.offsetWidth;
            var fun3 = DIV1.offsetWidth;
            var fun4 = y-parseInt(DIV1.offsetHeight/2);
            var fun5 = parseInt(DIV1.offsetHeight/2);
            var num6 = ZUO.offsetHeight;
            var fun7 = DIV1.offsetHeight;
            var css2 = num1-fun3;
            var css1 = num1-fun2;
            var css3 = num6-fun7;
            var css4 = num6-fun5;
            console.log(css1);
            console.log(x);
            if(x < fun2){
                fun1 = 0;
            }else if(x > css1){
                fun1 = css2;
            }
            if(y < fun5){
                fun4 = 0;
            }else if(y > css4){
                fun4 = css3;
            }
            DIV1.style.marginLeft=fun1+"px";
            DIV1.style.marginTop=fun4+"px";
            var FPS1 = DIV1.style.marginLeft;
            var FPS2 = DIV1.style.marginTop;
            var jun1 = parseInt(FPS1);
            var jun2 = parseInt(FPS2);
            YOU.style.background="url('of.jpg')no-repeat "+(-jun1*2)+"px "+(-jun2*2)+"px";
            YOU.style.backgroundSize="100%";
        }
    </script>
</body>
</html>
//yangjunquan
expand_less