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

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

使用方法
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「Creating A Sliding Image Puzzle」サンプル

sponsors

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

記事作成:
記事URL:

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