- 2008-08-23 (土)
- 技術
更新履歴
2008/08/23
- いろいろ調整しながらなので、動かなかったりご迷惑をお掛けいたします。とりあえず落ち着きました。
- ブログパーツ用のコードを変更しました。JSファイルの読み込みではなくアンカータグにしました。
なんかものが落ちる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コンストラクタに２種類のハッシュを渡してください。
大きいキングボンビーと小さいキングボンビーですね。
つまり別にキングボンビーの画像じゃなくても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的に作ったので、今後このキングボンビーたちが踊りだす感じを演出してみたいです。
近日公開 「キングボンビーがブログ上でダンスをする？」です。
【関連する記事】
- Newer: 買った本
- Older: jDropper.jsのブログパーツとBookmarklet
Comments:0
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, JavaScripter Blog
