skuare.net

超簡単にパズルを作成する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」サンプル

｜ ｜ ｜ ｜ ｜ ｜

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

関連記事

• javascriptライブラリ「mootools」でパズルを作成する
• 1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」
• [jQuery]Galleria
• [jQuery]ScrollShow
• [jQuery]jQPanView