yybt / covering-bad

A simple jQuery Plugin for cover an item by another item with dragging ability

!推动 图片清晰或者模糊

#####A simple jQuery Plugin for cover an item by another item with dragging ability.

####Live View On Codepen

#Usage

####Include:

<link href="css/coveringBad.css" type="text/css"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css"/>
<script src="js/coveringBad.js" ></script>

####Html:

<div class="covered">
	<div class="handle"></div>
	<div class="changeable"></div>
</div>

####js:

$(function() {
	$('.covered').coveringBad();
});

###Options:

>js

	marginY : 20, 	// Handle's distance from top and bottom
	marginX : 20, 	// Handle's distance from left and right
	setX    : 30, 	// Defulat location for handle from left
	setY    : 150,  // Defulat location for handle from top
	direction : "horizontal" // would be horizontal/vertical

###More than one :

<div class="covered first">
	<div class="handle"></div>
	<div class="changeable"></div>
</div>
<div class="covered second">
	<div class="handle"></div>
	<div class="changeable"></div>
</div>
<div class="covered third">
	<div class="handle"></div>
	<div class="changeable"></div>
</div>

$(function() {
	$('.first').coveringBad();
	$('.second').coveringBad();
	$('.third').coveringBad({
		marginY : 20 ,
		marginX : 400 ,
		setX  : 400,
		setY  : 235 ,
		direction   : "vertical"
	});
});

License

MIT http://seyedi.mit-license.org