四、拖拽放大镜

4.1 dom结构

<div id="box">
    <div id="glass"></div>
</div>
<div id="box1"></div>

4.2 css

#box {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 200px;
    left: 100px;
    border: 1px solid red;
    background-image: url(images/small.jpg);
    background-size: cover;
}
#glass {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 255, .5);
    left: 0;
    top: 0;
}
#box1 {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 200px;
    left: 550px;
    background-image: url(images/big.jpg);
    border: 1px solid red;
}

4.3 执行代码

// 获取元素
var box = document.getElementById("box");
var glass = document.getElementById("glass");
var box1 = document.getElementById("box1");

// 给glass添加mousedown事件
glass.onmousedown = function(e){
    // 获取鼠标位于视口的位置
    var x = e.clientX;
    var y = e.clientY;

    // 获取glass的定位值
    var left = this.offsetLeft;
    var top = this.offsetTop;

    // 给document添加mousemove事件
    document.onmousemove = function(e){
        // 获取鼠标移动后的位置
        var m_x = e.clientX;
        var m_y = e.clientY;

        // 定义变量 简化书写
        var resultX = m_x - x + left;
        var resultY = m_y - y + top;
        // console.log(resultX, resultY);

        // 进行边界限制
        if (resultX < 0){
            resultX = 0;
        } else if (resultX > box.clientWidth - glass.clientWidth){
            resultX = box.clientWidth - glass.clientWidth;
        }
        if (resultY < 0){
            resultY = 0;
        } else if (resultY > box.clientHeight - glass.clientHeight){
            resultY = box.clientHeight - glass.clientHeight;
        }

        // 改变glass的定位值 用移动后的鼠标位置 - 移动之前的位置 
        glass.style.left = resultX + "px";
        glass.style.top = resultY + "px";

        // 改变box1的背景图片定位 x 和 y 方向数值之间有空格
        box1.style.backgroundPosition = - 2 * resultX + "px " + - 2 * resultY + "px";
    }
}

// 鼠标抬起 取消移动事件
document.onmouseup = function(){
    document.onmousemove = null;
}