前端开发 | 在线支持

使用一个大大的outline 来实现周围半透明黑色遮罩。因为outline宽度设置再大，也不会对布局产生任何影响，至于超出的区域，通过容器overflow:hidden隐藏就可以了。

【示例】

HTML

<div class="crop-box">
    <h4>剪裁（仅演示移动）</h4>
    <div class="crop">
        <div id="cropArea" class="crop-area"></div>
        <img src="1.jpg">
    </div>
</div>
<div class="preview-box">
    <h4>预览</h4>
    <div class="preview">
        <img id="previewImg" src="1.jpg">
    </div>
</div>

CSS

.crop-box,
.preview-box {
    display: inline-block;
    vertical-align: top;
}
.crop,
.preview {
    position: relative;
    overflow: hidden;
}
.crop-area,
.preview {
    width: 80px; height: 80px;
}
.crop-area {
    position: absolute;
    left: 88px; top: 56px;
    outline: 256px solid #000;
    outline: 256px solid rgba(0,0,0,.5);
    background: url(about:blank);
    background: linear-gradient(to top, transparent, transparent);
    filter: alpha(opacity=50);
    cursor: move;
}
:root .crop-area {
    filter: none;
}
.crop img,
.preview img {
    display: block;
    width: 256px; height: 192px;
}
.preview img {
    position: absolute;
    left: -88px; top: -56px;
}

JS

var elCropArea = $('#cropArea');
var elPreviewImg = $('#previewImg');

var data = {};

elCropArea.on('mousedown', function (event) {
    data = {
        moving: true,
        left: elCropArea.position().left,
        top: elCropArea.position().top,
        x: event.pageX,
        y: event.pageY
    };
});
$(document).on({
    mousemove: function (event) {
        if (data.moving) {
            event.preventDefault();
            // 移动距离
            var moveX = event.pageX - data.x;
            var moveY = event.pageY - data.y;

            // 目标坐标
            var left = data.left + moveX;
            var top = data.top + moveY;

            // 边界判断
            if (left < 0) {
                left = 0;
            } else if (left + 80 > 256) {
                left = 176;
            }
            if (top < 0) {
                top = 0;
            } else if (top + 80 > 192) {
                top = 112;
            }

            // 重定位
            elCropArea.css({
                left: left,
                top: top
            });
            elPreviewImg.css({
                left: -1 * left,
                top: -1 * top
            });
        }
    },
    mouseup: function () {
        data.moving = false;
    }
});

下载源代码