タイトルの通りです。
デモページはこちら。
使い方は簡単。
まず、GitHubから jquery.hoverer.js をダウンロードしてきます。
そして次のような html を作ります。
<!DOCTYPE html> <meta charset="utf-8"> <title>jquery.hoverer.js テスト</title> <!-- Body --> <div>浮かせたいブロック要素</div> <!-- Java Script --> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="./jquery.hoverer.js"></script> <script type="text/javascript"> $(function() { $('div').hoverer({left: 100, top: 400, speed: 2}); }); </script>
ゆっくりと浮き上がります。
それだけです(笑)
引数は次の通り
{ left: 座標の初期値(X), top: 座標の初期値(Y), speed: 移動速度(1/60 秒毎に speed px 移動), callback: オブジェクトが画面外まで到達したときに呼ばれるコールバック関数 }
次のように指定すれば、上に浮いていって画面外まで到達してしまったオブジェクトを消すことが出来ます。
$('div').hoverer({ left: 100, top: 400, speed: 2, callback: function(pthis){ pthis.remove(); } });
背景画像を風船にして、ゆらゆら上がるように改造すれば、風船が飛んでいくみたいな感じも表現できそうですね。
簡単ですが、以上です。