1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」
サイト制作において重要なのは、訪問者を飽きさせず滞留させることでしょう。
この観点から言えばゲームなどがあってもいいのかもしれません。
jqPuzzleは1枚の画像からスライディングパズルを自動で作成します。
使用方法
jqPuzzleからjquery.jqpuzzle.js、jquery.jqpuzzle.cssを、jQueryからjquery.js（v1.2.1以上）をダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.jqpuzzle.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/jquery.jqpuzzle.css" type="text/css">
あとは、パズルにしたい画像にclass="jqPuzzle"を付与するだけです。
オプション
・言語：en、fr、de
・行：画像を区切る行数 (3 to 9)
・列：画像を区切る列数 (3 to 9)
・あける場所：(1 to rows*columns)
・シャッフの回数：デフォ3
・その他
S：最初からシャッフルする
N：数字を消す
A：シャッフルボタンを消す
B：'Solution'ボタンを消す
C：'Numbers'ボタンを消す
D：'moves'を消す
E：'seconds'を消す
記述方法
例）フランス語、3行3列、穴中央、数字・回数・秒を省略
<img src="画像パス" class="jqPuzzle jqp-fr-r3-c3-h5-NDE">
1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」サンプル
コメントする
記事作成：2007年10月16日 20:22
