超簡単にパズルを作成するjavascript「Creating A Sliding Image Puzzle」
[ 2分で読めて簡単導入できます]
息抜きにパズルを作成しようと思うと従来は、画像をスライスする必要がありました。
Creating A Sliding Image Puzzleは画像1枚から超簡単にパズルを作成できます。
＊以前紹介した1枚の画像から自動でパズルを作成するjavascript「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「Creating A Sliding Image Puzzle」サンプル
記事作成：2008年01月25日
