原生js放大镜效果实现

一、先进行文档的一个布局 mask为遮罩部分！

<div id="box">
    <div id="small">
        <img src="pic.png" width="200" height="200" alt=""/>
        <div id="mask"></div>
    </div>
    <div id="big">
        <img id="pic" src="pic.png" width="800" height="850" alt=""/>
    </div>
</div>

二、进行一个简单的样式布局

 * {
        margin: 0;
        padding: 0;
    }
    #small {
        position: relative;
        float: left;
        border: 1px solid black;
        text-align: center;
    }

    #mask {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 0;
        left: 0;
        background:#c40000;
        opacity: 0.1;
        filter: alpha(opacity=10);
        display: none;
    }

    #big {
        width: 350px;
        height: 350px;
        border: 1px solid black;
        float: left;
        overflow: hidden;
        display: none;
    }

三、获取要用到的文档对象

 function getId(id) {
        return document.getElementById(id)
    }
    var box = getId("box");
    var small = getId("small");
    var mask = getId("mask");
    var big = getId("big");
    var pic = getId("pic");

四、进行遮罩部分与大div的显示隐藏

small.onmouseover = function () {
        mask.style.display = "block";
        big.style.display = "block";
    };
    small.onmouseout = function () {
        mask.style.display = "none";
        big.style.display = "none"
    };

五、设置mask，让其跟随鼠标移动；

  small.onmousemove = function (e) {
//
        e = e ? e : window.event;
        var marginL = small.offsetLeft;//就是相对于其父坐标（body）计算其左侧的位置（左边距）
        var marginT = small.offsetTop;
// 得到可视区域的鼠标的坐标
        var currentX = e.clientX;
        var currentY = e.clientY;
        var x = currentX - (marginL + mask.offsetWidth / 2);
        var y = currentY - (marginT + mask.offsetHeight / 2);
//       console.log( currentX)
        //给mask设置移动区域
        if (x < 0) {
            x = 0;
        }
        if (x > small.offsetWidth - mask.offsetWidth) {
            x = small.offsetWidth - mask.offsetWidth
        }

        if (y < 0) {
            y = 0;
        }
        if (y > small.offsetHeight - mask.offsetHeight) {
            y = small.offsetHeight - mask.offsetHeight
        }

        mask.style.left = x + "px";
        mask.style.top = y + "px";

六、设置大div中的大图片进行位置的跟随移动

// 方法一：不需要定位
        //设置大盒子中显示的内容
        var relativeX = mask.offsetLeft;
        var relativeY = mask.offsetTop;
        console.log(relativeX, relativeY);//mask的移动坐标左上角的轨迹
        var proporationX = pic.offsetWidth / small.offsetWidth;
        var proporationY = pic.offsetHeight / small.offsetHeight;
        console.log(proporationX, proporationY);//大图和小图的倍数
        //因为需要移动方向所以为负值 把偏移量乘以倍数得到大图相应的偏移量
        pic.style.marginLeft = -relativeX * proporationX + "px";
        pic.style.marginTop = -relativeY * proporationY + "px";

方法二：需要进行定位 需要大图相对于父元素（bigdiv）进行绝对定位可以自己加上样式

 //找出mask坐标的移动范围的比例
        var W = mask.offsetLeft / (small.offsetWidth - mask.offsetWidth);
        var H = mask.offsetHeight / (small.offsetHeight - mask.offsetHeight);
        //找出big坐标的移动范围的比例 它们的比例是相等的
        //var bigW=big.offsetLeft/(pic.offsetWidth-big.offsetWidth);
        //var bigH=big.offsetHeight/(pic.offsetHeight-big.offsetHeight);
        //console.log(bigw,bigy);
        pic.style.left = -(pic.offsetWidth - big.offsetWidth) * W + "px";
        pic.style.top = -(pic.offsetHeight - big.offsetHeight) * H + "px";