1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」

サイト制作において重要なのは、訪問者を飽きさせず滞留させることでしょう。
この観点から言えばゲームなどがあってもいいのかもしれません。
jqPuzzleは1枚の画像からスライディングパズルを自動で作成します。
jPuzzle

使用方法
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」サンプル

sponsors

「1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」」をシェアする

記事作成:
記事URL:

TOP > > > 1枚の画像から自動でパズルを作成するjavascript「jqPuzzle」