镂空效果与outline

Html

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;
}

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;
    }
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

镂空效果与outline

代码描述：图片放大预览效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

㈩年丶砍柴

相关代码

剪裁（仅演示移动）

预览

镂空效果与outline

最新