九、裁剪

9.1 dom结构

<div id="box">
    <div id="mask"></div>
    <div id="area">
        <div id="dot"></div>
    </div>
</div>

9.2 css

#box {
    position: relative;
    width: 430px;
    height: 430px;
    border: 1px solid red;
    margin: 0 auto;
    background: url(images/small.jpg);
}
#mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
}
#area {
    position: absolute;
    width: 150px;
    height: 150px;
    left: 0;
    top: 0;
    background: url(images/small.jpg);
}
#dot {
    position: absolute;
    width: 10px;
    height: 10px;
    right: -5px;
    bottom: -5px;
    background-color: red;
    border-radius: 50%;
}

9.3 执行代码

// 获取元素
var box = document.getElementById("box");
var area = document.getElementById("area");
var dot = document.getElementById("dot");

// 给dot添加mousedown事件
dot.onmousedown =function(e){
    // 点击dot时会拖动area移动，需要阻止冒泡
    e.stopPropagation();

    // 获取鼠标位于视口的位置
    var x = e.clientX;
    var y = e.clientY;

    // 获取area的宽度和高度
    var a_width = area.clientWidth;
    var a_height = area.clientHeight;

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

        // 定义变量 用于简化代码
        var resultX = m_x - x + a_width;
        var resultY = m_y - y + a_height;

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

        // 赋值area的宽度和高度
        area.style.width = resultX + "px";
        area.style.height = resultY + "px";
    }
}

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

    // 获取元素定位值
    var a_left = this.offsetLeft
    var a_top = this.offsetTop;

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

        // 定义变量 简化书写
        var resultX = m_x - x + a_left;
        var resultY = m_y - y + a_top;

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

        // 赋值area的定位值
        area.style.left = resultX + "px";
        area.style.top = resultY + "px";
        // 改变图片的背景定位
        area.style.backgroundPositionX = - resultX + "px";
        area.style.backgroundPositionY = - resultY + "px";
    }
}

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

9.4 输出结果