Jquery-sprite

jquery plugin for sprite (animation)

Project maintained by yangkun Hosted on GitHub Pages — Theme by mattgraham

Usage

Read the related blog post, first

require jquery-core 


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.sprite.js"></script>
	$('#button').sprite({
		cellSize: [52,37],
		cells: [7, 7],
		initCell: [0,0],
		wrap: false,
		interval: 50
	});
</script>
<span id="button"></span>

Options

Name Type Description Default
cellSize Array size of a cell [width, height] [0,0]
cells Array count of cell [row, col] [1,1]
initCell Array initial cell position [row,col] [0,0]
offset Array initial cell's offset [x,y] [0,0]
interval Number animate speed (ms) 50
wrap Boolean about animation true

Methods

Method Description
.next() move to next cell in same row
.prev() move to previous cell in same row
.go() animate to last cell in row (with no wrap)
.revert() animate to first cell in row (with no wrap)
.stop() stop animate
.cell(row, col) move to specified cell [row, col]
.row(row) move to specified row and first col
.col(col) move to specified col in same row
.offset(x,y) overwrite offset option

Demo

Global Option

<script type="text/javascript">
var googleOpts = {
	cellSize: [52,37],
	cells: [7, 7],
	initCell: [0,0],
	wrap: false,
	interval: 50
};

Animate

<div id="animate">
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
</div>

<script type="text/javascript">
$('#animate span.google-sprite').each(function(i) {
	var sprite = $(this).sprite(googleOpts).hover(function() {
		sprite.go();
	},function() {
		sprite.revert();
	});
	sprite.row(i);
});
</script>

Swap

<div id="swap">
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
	<a href="#"><span class="google-sprite"></span></a>
</div>

<script type="text/javascript">
$('#swap span.google-sprite').each(function(i) {
	var sprite = $(this).sprite(googleOpts).hover(function() {
		sprite.col(6);
	},function() {
		sprite.col(0);
	});
	sprite.row(i);
});
</script>

Character Moving

Move character as [A] ← [W] ↑ [S] ↓ [D] → and change character as [Enter]

Contact