Heading for the future

一个移入遮罩层消失的放大镜

具体的实现效果如上图，即鼠标移入时遮罩层消失

实现原理：背景图和遮罩层不进行任何操作，保持最初状态就好，然后给移动的小方块加和大的背景图一样的背景图，移动小方块的同时通过background-position移动小方块背景图的位置来实现

老规矩，直接上代码，感兴趣的同学可以拉下去自己看看

<!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>Document</title>
    <style>
    
    #box{
            width: 350px;
            height: 350px;
            margin: 50px;
            border: 1px solid #000;
            position: relative;
            /* overflow: hidden; */
        }
        #mask{
            width: 175.5px;
            height: 175.5px;
            background: url(1122.png) ;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            cursor: move;
        }
        #big{
            position: absolute;
            top: 0;
            left: 355px;
            width: 400px;
            height: 400px;
            overflow: hidden;
            display: none;
            border: 1px solid #000;
        }
        #bImg{
            position: absolute;
            width: 800px;
            height: 800px;
            top: 0;
            left: 0;
        }
        #zzc{
            width: 350px;
            height: 350px;
            background: grey;
            opacity: .3;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
        }
        #small{
            overflow: hidden;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="small">
            <img src="1122.png" id="sImg">
            <div id="zzc"></div>
            <div id="mask"></div>
        </div>
        <div id="big">
            <img src="1122.png" id="bImg">
        </div>
    </div>
</body>
</html>
<script>
function $id(id){
        return document.getElementById(id);
    }
 
    var box = $id("box");
    var small = $id("small");
    var sImg = $id("sImg");
    var mask = $id("mask");
    var big = $id("big");
    var bImg = $id("bImg");
    var zzc = $id("zzc");
    // 鼠标移入事件
    small.onmouseover = function() {
        mask.style.display = "block";
        big.style.display = "block";
    }
    //鼠标移出事件
    small.onmouseout = function() {
        mask.style.display = "none";
        big.style.display = "none";
    }
    //鼠标移动
    small.onmousemove = function(e){
        var e = e || event;
        var x= e.pageX - box.offsetLeft - mask.offsetWidth/2;
        var y= e.pageY - box.offsetTop - mask.offsetHeight/2;
        var maxL = box.offsetWidth - mask.offsetWidth;
        var maxT = box.offsetHeight - mask.offsetHeight;
        x = x < 0 ? 0 :(x > maxL ? maxL : x);
        y = y < 0 ? 0 :(y > maxT ? maxT : y);
        mask.style.left = x + "px";
        mask.style.top = y + "px";
 
 
        //mask背景图位置
        mask.style.backgroundPosition = -x + "px -" + y +"px";
        
        //最终的比例关系是这样的：
        //大图宽度/小图宽度  =  大图可视区big宽度/小图可视区mask宽度 =  大图向左移动距离 /     
        // mask向右移动的距离
        var bigx = x * bImg.offsetWidth / sImg.offsetWidth;
        var bigy = y * bImg.offsetHeight / sImg.offsetHeight;
        bImg.style.left = -bigx +"px";
        bImg.style.top = -bigy +"px";
    }

</script>

 

好了，就写到这里了，我要继续去喝枸杞了，补身体重要，听说红枸杞红枸杞黄芪一起泡快乐似神仙，也不知道真假

posted @ 2018-11-02 08:35  一只菜鸟攻城狮啊  阅读(465)  评论(0)  编辑  收藏  举报