前の記事 ≪:カッコ悪いスクロールバーとはオサラバできるjQueryプラグイン「jQuery v...
次の記事 ≫:次のデザインで使えるかもしれないフレッシュでハイクオリティなフ...

画像を使った綺麗なタイマーが実装できるjQueryプラグイン「spriteTimer」

2010年10月28日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Davor Spasovski / Web Developer

画像を使った綺麗なタイマーが実装できるjQueryプラグイン「spriteTimer」。
次のような1枚の画像を使って簡単に綺麗なカウントダウン&カウントアップタイマーが実装できます。
タイマーを表示されるなら味気ないテキスト表示よりも画像で綺麗にやりたいですよね。
画像なので、画像編集ツールを使って簡単にフォントやデザインを替えられます。

元画像。これをjQueryでCSSスプライトを活用してタイマーにします。


残り1時間に設定したカウントダウンタイマー。ちゃんと時間表示になってますね。



カウントアップにも対応。スタート/ストップボタンによってタイマーの制御も出来ます。



地味に使いそうなので覚えておいてもよさそう。

関連エントリ

関連の記事検索:jQuery, 画像, プラグイン, plugin
スポンサード リンク

By.KJ : 2010年10月28日 10:07 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)