あまりサイト上で使用する機会はないかもしれませんが、
スクラッチカードのようにマウス操作(ドラッグ)で画像を削ることで
背面に配置している画像を表示することができる「jQuery Scratchie Plugin」がおもしろかったのでご紹介。

jQuery Scratchie Plugin » alexweber.com.br

上記リンク先ページにある動作デモを実際試してみると、、、

jQuery Scratchie Plugin


これが元画像。
この画像をドラッグして削っていくと。


このような感じに上に配置した画像が削られ、
背面に配置した画像が出てきます。

使用する画像やドラッグ時の画像などに加え、
スクラッチ完了後に何かアクションを起こさせるコールバックも
オプションで用意されています。

SCRIPTの記述は以下。(プラグインページチュートリアルより)

// executes the plugin on the selected div
// the plugin accepts a multitude of parameters but can be executed with
// a minimal configuration

$(document).ready(function(){
	$('#raspadinha').scratchie({
    	target : 'target',
        img : 'prize.jpg',
        imgHeight : 200, // target (prize) img height
        imgWidth : 400, // target (prize) img width
        title : 'Try your luck!',
        fillImg : 'overlay.jpg',
        requireMouseClick : false,
        callback: function(){
        	alert('Congratulations!');
        }
	});
});

今まであまり見たことがないUIなので
ゲーム的な要素として何かおもしろいことができそうな気もします。

何かの際に是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)

  • Topics 20101210 | Real Topics | 2010.12.10 12:02

    [...] スクラッチカードの様なUIを実装できるjQueryプラグイン「jQuery Scratchie Plugin」     This entry was written by admin, posted on 2010年12月10日 at 12:00 PM, and filed under 最新情報 and tagged AKB48, Android, [...]







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

スクラッチカードの様なUIを実装できるjQueryプラグイン「jQuery Scratchie Plugin」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner