jquery支持多种模式的在线图片编辑工具

使用方法

$(document).ready(function() {
	$("#slider").slider({
		range : "min",
		min : 0,
		max : 100,
		slide : function(event, ui) {
			var val = ui.value;
			var action = $('.action.selected').val();
			applyEffect(action, val);
		}
	});
	$('.action').on('click', function() {
		resetSlider();
		$('.btn').removeClass("selected");
		$(this).addClass("selected");
	});
	
	$('#vintage').on('click', function() {
		$('.btn').removeClass("selected");
		$(this).addClass("selected");
		$("#slider").hide();
		$("#vintage-slide").show();
		vintage(1);
	});
	
	$('.vintage-effect').on('click', function() {
		var val = $(this).data("slide")
		vintage(val);
	});

	$('#reset').on('click', function() {
		resetSlider();
		$('.btn').removeClass("selected");
		$('.btn').first().addClass("selected");
	});

});

function applyEffect(action, val) {
	if (action == 'Blur') {
		blur(val);
	} else if (action == 'Sepia') {
		sepia(val);
	}
}

function blur(val) {
	$("#image").css("filter", "blur(" + val + "px)");
}

function sepia(val) {
	$("#image").css("filter", "sepia(" + val + "%)");
}

function vintage(val) {
	$('.vintage-effect').removeClass("selected")
	$("#vintage-effect"+val).addClass("selected");
	$(".overlay").show();
	$(".overlay").css("background", "url('./image/vintage-bg"+val+".jpg')")
}

function resetSlider() {
	$("#slider").show();
	$("#vintage-slide").hide();
	$(".overlay").hide();
	var options = $("#slider").slider('option');
	$("#slider").slider("value", options.min);
	var action = $('.action.selected').val();
	applyEffect(action, options.min);
}