JS 放大镜功能

用JS实现放大镜效果

效果图

布局

<div class="box" id="box">
    <div class="small"><!--小层-->
        <img src="images/small.png" width="350" alt=""/>
        <div class="mask"></div><!--遮挡层-->
    </div><!--小图-->
    <div class="big"><!--大层-->
        <img id="img" src="images/big.jpg" width="800" alt=""/><!--大图-->
    </div><!--大图-->
</div>

JS代码块

<script>
    //获取需要操作的元素
    var box = my$("box");
    //小图的div
    var small = box.children[0];
    //遮挡层
    var mask = small.children[1];
    //大图的div
    var big = box.children[1];
    //大图
    var bigImg = big.children[0];

    //注册鼠标进入和移出的事件
    box.onmouseover = function () {
        mask.style.display = "block";
        big.style.display = "block";
    }
    box.onmouseout = function () {
        mask.style.display = "none";
        big.style.display = "none";
    }

    //鼠标的移动事件
    small.onmousemove = function (e) {
        //设置鼠标在遮挡层的中间显示   //减去margin值   // 减100 : 主要是减去margin值所带来的影响
        var x = e.clientX - mask.offsetWidth / 2 - 100;
        var y = e.clientY - mask.offsetHeight / 2 - 100;

        //设置横纵坐标的最大最小值
        x = x < 0 ? 0 : x;
        y = y < 0 ? 0 : y;
        x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
        y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;

        //给遮挡层赋值
        mask.style.left = x + "px";
        mask.style.top = y + "px";

        //遮挡层的移动距离/大图的移动距离 = 遮挡层的最大移动距离/大图的最大移动距离
        //求 大图的移动距离 = 遮挡层的移动距离 *大图的最大移动距离 / 遮挡层的最大移动距离

        //大图的最大移动距离
        var maxX = bigImg.offsetWidth - big.offsetWidth;
        var maxY = bigImg.offsetHeight - big.offsetHeight;

        //大图的移动距离
        var bigImgX = x * maxX / (small.offsetWidth - mask.offsetWidth);
        var bigImgY = y * maxY / (small.offsetHeight - mask.offsetHeight);

        //给大图片赋值
        bigImg.style.marginLeft = -bigImgX + "px";
        bigImg.style.marginTop = -bigImgY + "px";

    }


</script>