JavaScript + Ajax 実践サンプル集 - jQueryで花火をうちあげる

jQueryで花火をうちあげる

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのanimate apiを利用して夜空に花火をうちあげます。サンプルが表示されると夜空に３秒間隔で花火が打ち上げられます。打ち上げる間隔は、setIntervalの時間を書き換えます。花火の大きさは「emitter.duplicate(50)」の引数50を書き換えます。

このサンプルを編集して試してみる

このサンプルの解説はここを参照してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Fireworks</title>
  <link href="jQuery/fireworks/fireworks.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
    $.fn.duplicate = function(count, cloneEvents) {
        var tmp = [];
        for ( var i = 0; i < count; i++ ) {
            $.merge( tmp, this.clone(cloneEvents).get());
        }
        return this.pushStack(tmp);
    };

function explode(elem_id) {
        sky = $('#' + elem_id);
            
        colors = [  '#ffffff', '#ff0000', '#00ff00', '#ffff00',
                    '#00ffff', '#ff00ff', '#ffee00' ]
            
        emitter = $('<div></div>').addClass('particle');

multicolor = Math.floor(Math.random()*10);

emitter.css({
            left: Math.floor((400-2)*Math.random()) + 3 + 'px',
            top: Math.floor((100-2)*Math.random()) + 3 + 'px',
            background: colors[Math.floor(Math.random()*colors.length)]
        });

sky.empty().append(emitter.duplicate(50));  // 50

$('div', sky).each(function() {
            xoffset = Math.floor((10- -11)*Math.random()) + -10;
            yoffset = Math.floor((10- -11)*Math.random()) + -10;

if(multicolor > 5) $(this).css('background', colors[Math.floor(Math.random()*colors.length)]);

$(this).animate({
                "left": "+="+ xoffset*10 +"px",
                "top": "+="+ yoffset*10 +"px",
            },  2500);

$(this).animate({
                "opacity": "0.1",
                "top": "+=20"
                },  "slow");

}); 
    } 
    
    $(function () {     
      setInterval("explode('photo')", 3000);        
    });
  
  </script>
</head>
<body>
  <h1>Fireworks!</h1>
  <div id="photo"></div>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryで花火をうちあげる

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryで花火をうちあげる

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!