skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

息抜きにパズルを作成しようと思うと従来は、画像をスライスする必要がありました。
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日

前の記事：Cover Flowテイストの画像ギャラリーjavascript「My Scrap Room」
次の記事：JavaScriptでお手軽にLightBox風を実現する