tsujimotterのノートブック

日曜数学者 tsujimotter の「趣味で数学」実践ノート

指定したオブジェクトが上に浮き上がるだけの jQuery プラグインを作った

技術系 javascript

タイトルの通りです。

デモページはこちら。

HTTP Streaming パターン テスト


使い方は簡単。
まず、GitHubから jquery.hoverer.js をダウンロードしてきます。

junpeitsuji/jquery.hoverer.js · GitHub

そして次のような 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();
  }
});



背景画像を風船にして、ゆらゆら上がるように改造すれば、風船が飛んでいくみたいな感じも表現できそうですね。


簡単ですが、以上です。