超簡単にパズルを作成するjavascript「Creating A Sliding Image Puzzle」

息抜きにパズルを作成しようと思うと従来は、画像をスライスする必要がありました。
Creating A Sliding Image Puzzleは画像1枚から超簡単にパズルを作成できます。
＊以前紹介したjqPuzzleと比較すると機能面でおちます。

使用方法

Creating A Sliding Image Puzzleからjquery.puzzle.jsを、jQueryからjquery.js（v1.2.1）をダウンロードします。


<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.puzzle.js" type="text/javascript"></script>
<script type="text/javascript">
	$(
		function(){
			$( "div.class名").puzzle( 100 );  //数字は1つのパズルの大きさ
		}
	);
</script>

上記を記述したら、あとは画像を指定したclassで囲むだけです。


<div class="class名">
<img src="画像パス">
</div>

サンプル

Javascriptサンプルページ一覧

skuare.net