Home > 技術 > キングボンビーがサイトを侵略する?jQuery Plugin - kingbonbi.js作りました

キングボンビーがサイトを侵略する?jQuery Plugin - kingbonbi.js作りました

更新履歴

2008/08/23
- いろいろ調整しながらなので、動かなかったりご迷惑をお掛けいたします。とりあえず落ち着きました。
- ブログパーツ用のコードを変更しました。JSファイルの読み込みではなくアンカータグにしました。

kingbonbi
なんかものが落ちるjQuery Plugin - JDropper作りましたに引き続きオモロ〜なJavaScriptを作ってみました。

なんでキングボンビーを採用したのかよく分からないのですが、お風呂の中でなんか面白いことJavaScriptで出来ないかな〜と考えていたらキングボンビーに行きつきましたw
しかも名付けて「kingbonbi.js」!!
そのままです。

ブログパーツかBookmarkletとして公開いたします。
また今回もソースコードは公開いたしますので、何かの参考になれば幸いです。

続きからご覧ください。



サンプルで遊んでみる

以下のキングボンビーをクリックすると、画面がキングボンビーだらけになります。


ただこれだけですw

対応ブラウザ

  • Mac
    • Firefox3.0
    • Safari3.1
    • Opera9.5
  • Windows
    • IE6.0
    • IE7.0
    • Firefox3.0
    • Safari3.1
    • Opera9.5

今回は画像に透過PNGを使っているのでIE6.0では透けない画像になってしまいます。
ご了承ください。

基本的な使い方

kingbonbiの使い方はただ呼ぶだけです。

kingbonbiコンストラクタに2種類のハッシュを渡してください。
大きいキングボンビーと小さいキングボンビーですね。

つまり別にキングボンビーの画像じゃなくてもOKです。
2種類の画像を用意出来ればなんでもいいのです。

kingbonbi.jsに必要なライブラリ+プラグイン

kingbonbi.jsはjQueryを使っています。
ですので、動作を確認する場合や実装する場合には以下からjQuery本体をダウンロードしてください。
jQuery: The Write Less, Do More, JavaScript Library

またアニメーションにはjQuery Pluginのeasingを使っております。合わせたダウンロードをお願いいたします。
jQuery Easing Plugin

てっとり速く使ってみたい方は、すべてをまとめた圧縮ファイルをご用意していますのでそちらのダウンロードをお願いいたします。
圧縮ファイルのダウンロードは以下からどうぞ。
kingbonbi.zip

kingbonbi.jsはだけは以下からどうぞ。
kingbonbi.js

ブログパーツ用のコード

<a href="javascript:(function(){var%20s=document.createElement('scr'+'ipt');s.charset='UTF-8';s.language='javascr'+'ipt';s.type='text/javascr'+'ipt';var%20d=new%20Date;s.src='http://lab.hisasann.com/kingbonbi/js/bookmarklet.js?u='+escape(document.location.href)+'&d='+d.getMilliseconds();document.body.appendChild(s)})();"><img src='http://lab.hisasann.com/kingbonbi/img/kingbonbi.png' style='border: 0px ;'/></a>

Bookmarklet用のリンク

以下のリンクをブラウザのお気に入りにドラッグしてください
kingbonbi

ちょっとしたアドバイス

今回はキングボンビーを30 + 1個表示しています。
出現タイミングをランダムにしているので、30個全部がいっきに動くことはありません。
よって30個以上でも多分問題ないと思います。
ただしやっぱり個数が多いとCPUを喰うので遅くなる可能性があります。

まとめ

キングボンビーの画像がちょっと荒いのが気になるところ。
そしてかなりbeta的に作ったので、今後このキングボンビーたちが踊りだす感じを演出してみたいです。

近日公開 「キングボンビーがブログ上でダンスをする?」です。

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1105
Listed below are links to weblogs that reference
キングボンビーがサイトを侵略する?jQuery Plugin - kingbonbi.js作りました from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > キングボンビーがサイトを侵略する?jQuery Plugin - kingbonbi.js作りました

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top