下载代码
html
css
js
分享到微信朋友圈
X
html
Blur px
Brightness %
Contrast %
Grayscale %
Hue Rotate deg
Invert %
Opacity %
Saturate %
Sepia %
RESET
css
html, body {
background-color: #303030;
height: 100%;
}
a, a:hover, a:active, a:focus {
color: white;
}
img {
max-width: 300px;
border: 5px solid #ffffff;
border-radius: 5px;
}
.column{
width: 30%;
float: left;
}
JavaScript
var img;
var blur = 0;
var brightness = 100;
var contrast = 100;
var grayscale = 0;
var hueRotate = 0;
var invert = 0;
var opacity = 100;
var saturate = 100;
var sepia = 0;
$(document).ready(function() {
$('.control').on('input', update);
});
function update(ctrl) {
$(this).parent().find('.filter-value').html( $(this).val() );
blur = $('#blur').val();
brightness = $('#brightness').val();
contrast = $('#contrast').val();
grayscale = $('#grayscale').val();
hueRotate = $('#hue-rotate').val();
invert = $('#invert').val();
opacity = $('#opacity').val();
saturate = $('#saturate').val();
sepia = $('#sepia').val();
// Updating
$('img').css('filter', 'blur('+blur+'px) brightness('+brightness+'%) contrast('+contrast+'%) grayscale('+grayscale+'%) hue-rotate('+hueRotate+'deg) invert('+invert+'%) opacity('+opacity+'%) saturate('+saturate+'%) sepia('+sepia+'%)');
$('img').css('-webkit-filter', 'blur('+blur+'px) brightness('+brightness+'%) contrast('+contrast+'%) grayscale('+grayscale+'%) hue-rotate('+hueRotate+'deg) invert('+invert+'%) opacity('+opacity+'%) saturate('+saturate+'%) sepia('+sepia+'%)');
}
function reset() {
$('.filter-value').html('');
blur = 0;
brightness = 100;
contrast = 100;
grayscale = 0;
hueRotate = 0;
invert = 0;
opacity = 100;
saturate = 100;
sepia = 0;
$('#blur').val(blur);
$('#brightness').val(brightness);
$('#contrast').val(contrast);
$('#grayscale').val(grayscale);
$('#hue-rotate').val(hueRotate);
$('#invert').val(invert);
$('#opacity').val(opacity);
$('#saturate').val(saturate);
$('#sepia').val(sepia);
$('img').css('filter', 'blur('+blur+'px) brightness('+brightness+'%) contrast('+contrast+'%) grayscale('+grayscale+'%) hue-rotate('+hueRotate+'deg) invert('+invert+'%) opacity('+opacity+'%) saturate('+saturate+'%) sepia('+sepia+'%)');
$('img').css('-webkit-filter', 'blur('+blur+'px) brightness('+brightness+'%) contrast('+contrast+'%) grayscale('+grayscale+'%) hue-rotate('+hueRotate+'deg) invert('+invert+'%) opacity('+opacity+'%) saturate('+saturate+'%) sepia('+sepia+'%)');
}