某宝放大镜特效，

先看效果

 1.整体思路是通过：鼠标移入小图位置，获取小图位置，的宽高度。然后放大图的部分的跟随比例相应变大。

offset   指的是距离它自己的距离

offsetWidth 水平方向 width + 左右padding + 左右border-width
offsetHeight 垂直方向 height + 上下padding + 上下border-width

pageX、pageY ： 对于整个页面来说，包括了被卷去的body部分的长度

1.HTML 部分

    <div class="box" id="box">
        <div class="small">
            <img src="../img/mj.png" class="min" style="width: 400px;height: 400px; " alt="">
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="../img/mj.png" lt="">
        </div>
    </div>

 2.CSS部分

注意大图没有移入时是隐藏状态。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        .big{
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 410px;
            overflow: hidden;
            display: none;
        }
        .big img{
            position: absolute;
            width: 800px;
        }
        .mask{
            width: 200px;
            height: 200px;
            background-color: rgba(220, 220, 220, 0.281);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
    </style>

3.JS部分

    <script>
        function my$(id){
            return document.getElementById(id)
        }
        var box =my$("box")
        var smallBox = box.children[0];
        var bigBox = box.children[1];
        var smallImage = smallBox.children[0];
        var mask = smallBox.children[1];
        var bigImage = bigBox.children[0];

        // 1.鼠标移入 显示mask和bigBox
        //   鼠标离开 隐藏mask和bigBox
        box.onmouseenter = function(){
            mask.style.display = "block"
            bigBox.style.display = "block"
        }
        box.onmouseleave = function(){
            mask.style.display = "none"
            bigBox.style.display = "none"
        }

        // 2.当鼠标在smallBox中移动,让mask中心跟着鼠标一起移动
        smallBox.onmousemove = function(e){
            var e = e || window.event;
            // 鼠标的坐标点
            var maskX = e.pageX - box.offsetLeft;
            var maskY = e.pageY - box.offsetTop;
            // var maskX = e.offsetX;
            // var maskY = e.offsetY;

            // mask中心点
            maskX = maskX -  mask.offsetWidth / 2;
            maskY = maskY - mask.offsetHeight / 2;

            // 把mask限制在smallbox中
            maskX = maskX < 0 ? 0 : maskX;
            maskY = maskY < 0 ? 0 : maskY; 
            maskX = maskX > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : maskX
            maskY = maskY > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight : maskY

            mask.style.left = maskX + "px"
            mask.style.top = maskY + "px"

            // 3. 当mask移动，让大图片移动到相应位置上

            bigImage.style.left = -(maskX * 2) + "px";
            bigImage.style.top = -(maskY * 2) + "px";

        }
    </script>