JavaScript + Ajax 実践サンプル集 - jQueryのBubbleEngineプラグインで泡を発生させる

jQueryのBubbleEngineプラグインで泡を発生させる

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

このサンプルは、jQueryの BubbleEngine/BubbleMachine プラグインを利用して泡を発生させます。泡はバブルマシンが発生させます。サンプルが表示されると２台のバブルマシンから泡がでます。 [Add a new Bubble Machine]ボタンをクリックすると、バブルマシンを追加します。泡の種類は「Type」から選択することができます。１番目のタイプを選択するとハート型の泡がでます。３番目のタイプを選択するとツイッター型の泡がでます。２番目のタイプを選択すると、通常の泡ができます。泡の大きさはスライダーで変えることができます。バブルマシンとコントールパネルは、ドラッグして任意の場所に移動することができます。

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

<!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>Bubble Engine - jQuery Plugin (v1.0) | Bubble Machines with Bubble Engine</title>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/bubbleEngine/css/BubbleEngineDemo.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
  <script src="jQuery/bubbleEngine/js/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="jQuery/bubbleEngine/js/jquery-BubbleEngine.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var SoapBubbleMachineNumber1 = $().BubbleEngine({
        particleSizeMin: 0,
        particleSizeMax: 60,
        particleAnimationDuration: 5000,
        particleScatteringX: 500,
        particleScatteringY: 150,
        particleDirection: 'right',
        gravity: -100,
        imgSource: 'jQuery/bubbleEngine/images/bubble.png'
      });
      var SoapBubbleMachineNumber2 = $().BubbleEngine({
        particleSizeMin: 0,
        particleSizeMax: 45,
        particleAnimationDuration: 2000,
        particleScatteringX: 345,
        particleScatteringY: 100,
        particleDirection: 'left',
        gravity: -100,
        imgSource: 'jQuery/bubbleEngine/images/bubble.png'
      });
      SoapBubbleMachineNumber1.addBubbles(50);
      SoapBubbleMachineNumber2.addBubbles(20);

$('#xxx').click(function () {
        var NewID = 'NewBubbleMachine' + Math.floor(Math.random() * 10000000);
        var NewIDINT = NewID;
        $('#SoapBubbleMachineNumber1').clone().appendTo('body').attr('id', NewID);
        $('#' + NewIDINT).css({
          'top': 500,
          'left': 500
        });
        eval(NewID = $().BubbleEngine());
        NewMachine = eval(NewID);
        NewMachine.addBubbles(50);
        $('#' + NewIDINT + ' button.add').html('50');
        var offset = $('#' + NewIDINT).offset();
        NewMachine.settings(null, null, offset.left + 200, offset.top, null, null, null, null, null, null);
        refreshSwatch(NewMachine);
        $('#' + NewIDINT).draggable({
          start: function () {
            $('.SoapBubbleMachine').each(function () {
              if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-R-hover.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-R.png');
              if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-L-hover.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-L.png');
            });
            MachineID = NewID;
            var ConfigValues = MachineID.getConfig();
            UpdateControls(MachineID, ConfigValues);
          },
          drag: function () {
            var offset = $(this).offset();
            //NewID.settings(null, null, offset.left+200, offset.top+50, null, null, null, null, null);
            if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-R.png' || $(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-R-hover.png') {
              $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-R-hover.png');
              NewID.settings(null, null, offset.left + $('#SoapBubbleMachineNumber1').width() - 40, offset.top + 50, null, null, null, null, 'right', null);
            } else {
              $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-L-hover.png');
              NewID.settings(null, null, offset.left + 20, offset.top + 50, null, null, null, null, 'left', null);
            }
          }
        });
        $('#' + NewIDINT).click(function () {
          MachineID = NewID;
          $('.SoapBubbleMachine').each(function () {
            if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-R-hover.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-R.png');
            if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-L-hover.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-L.png');
          });
          if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-R.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-R-hover.png');
          if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-L.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-L-hover.png');

var ConfigValues = MachineID.getConfig();
        UpdateControls(MachineID, ConfigValues);

});

$('.SoapBubbleMachine button.remove').click(function () {
        MachineID = eval($(this).parent().attr('id'));
        MachineID.removeBubbles();
        $(this).parent().find('button.add').html(MachineID.getCounter());
      });
      $('.SoapBubbleMachine button.add').click(function () {
        MachineID = eval($(this).parent().attr('id'));
        MachineID.addBubbles(20);
        $(this).html(MachineID.getCounter());
      });
      $('.SoapBubbleMachine button.direction').click(function () {
        var offset = $(this).parent().offset();
        MachineID = eval($(this).parent().attr('id'));
        if ($(this).parent().find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-L.png' || $(this).parent().find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-L-hover.png') {
          $(this).parent().find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-R.png');
          MachineID.settings(null, null, offset.left + $('#SoapBubbleMachineNumber1').width() - 40, offset.top + 50, null, null, null, null, 'right', null);
          $(this).html('< Turn Left');
        } else {
          $(this).parent().find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-L.png');
          MachineID.settings(null, null, offset.left + 20, offset.top + 50, null, null, null, null, 'left', null);
          $(this).html('Turn Right >');
        }
      });

//---------------------------------------------------------------------
      $(".SoapBubbleMachine").click(function () {
        MachineID = eval($(this).attr('id'));
        $('.SoapBubbleMachine').each(function () {
          if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-R-hover.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-R.png');
          if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-L-hover.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-L.png');
        });
        if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-R.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-R-hover.png');
        if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-L.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-L-hover.png');

var ConfigValues = MachineID.getConfig();
        UpdateControls(MachineID, ConfigValues);
      });

$(".SoapBubbleMachine").draggable({
        start: function () {
          $('.SoapBubbleMachine').each(function () {
            if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-R-hover.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-R.png');
            if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-L-hover.png') $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-L.png');
          });
          MachineID = eval($(this).attr('id'));
          var ConfigValues = MachineID.getConfig();
          UpdateControls(MachineID, ConfigValues);
        },
        drag: function () {
          var offset = $(this).offset();
          MachineID = eval($(this).attr('id'));
          if ($(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-R.png' || $(this).find('img').attr('src') == 'jQuery/bubbleEngine/images/Bubble-Machine-R-hover.png') {
            $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-R-hover.png');
            MachineID.settings(null, null, offset.left + $('#SoapBubbleMachineNumber1').width() - 40, offset.top + 50, null, null, null, null, 'right', null);
          } else {
            $(this).find('img').attr('src', 'jQuery/bubbleEngine/images/Bubble-Machine-L-hover.png');
            MachineID.settings(null, null, offset.left + 20, offset.top + 50, null, null, null, null, 'left', null);
          }
        }
      });

$("#control").draggable({
        handle: '#header'
      });

offset = $('#SoapBubbleMachineNumber1').offset();
      SoapBubbleMachineNumber1.settings(null, null, offset.left + $('#SoapBubbleMachineNumber1').width() - 40, offset.top + 50, null, null, null, null, null, null);
      offset = $('#SoapBubbleMachineNumber2').offset();
      SoapBubbleMachineNumber2.settings(null, null, offset.left + 20, offset.top + 50, null, null, null, null, null, null);
            
      var ConfigValues = SoapBubbleMachineNumber1.getConfig();
      UpdateControls(SoapBubbleMachineNumber1, ConfigValues);
      refreshSwatch(SoapBubbleMachineNumber1);
    });
   
    function refreshSwatch(MachineID) {
      var particleSizeMin = $("#particleSizeMinMax").slider("values", 0)
          , particleSizeMax = $("#particleSizeMinMax").slider("values", 1)
          , particleAnimationDuration = $("#particleAnimationDuration").slider("value")
          , particleScatteringX = $("#particleScatteringX").slider("value")
          , particleScatteringY = $("#particleScatteringY").slider("value");

$("#Info_particleSizeMinMax").html('Bubble Size: ' + $("#particleSizeMinMax").slider("values", 0) + ' - ' + $("#particleSizeMinMax").slider("values", 1));
      $("#Info_particleAnimationDuration").html('Bubble Livetime: ' + $("#particleAnimationDuration").slider("value"));
      $("#Info_particleScatteringX").html('Scattering X: ' + $("#particleScatteringX").slider("value"));
      $("#Info_particleScatteringY").html('Scattering Y: ' + $("#particleScatteringY").slider("value"));
      MachineID.settings(particleSizeMin, particleSizeMax, null, null, particleAnimationDuration, null, particleScatteringX, particleScatteringY, null, null);
    }
       
    function UpdateControls(Machine, ConfigValues) {
      $("#particleSizeMinMax").slider({
        slide: function () { refreshSwatch(Machine) },
        change: function () { refreshSwatch(Machine) },
        range: true,
        min: 0,
        max: 200,
        values: [ConfigValues[0], ConfigValues[1]]
      });
      $("#particleAnimationDuration, #particleScatteringX, #particleScatteringY").slider({
        slide: function () { refreshSwatch(Machine) },
        change: function () { refreshSwatch(Machine) },
        orientation: 'horizontal',
        range: "min",
        min: 0
      });
      $("#particleAnimationDuration").slider({
        max: 10000,
        value: ConfigValues[2]
      });
      $("#particleScatteringX").slider({
        max: 1000,
        value: ConfigValues[3]
      });
      $("#particleScatteringY").slider({
        max: 1000,
        value: ConfigValues[4]
      });
      $('#icon1').unbind('click').click(function () {
        Machine.settings(null, null, null, null, null, null, null, null, null, 'jQuery/bubbleEngine/images/heart.png');
      });
      $('#icon2').unbind('click').click(function () {
        Machine.settings(null, null, null, null, null, null, null, null, null, 'jQuery/bubbleEngine/images/bubble.png');
      });
      $('#icon3').unbind('click').click(function () {
        Machine.settings(null, null, null, null, null, null, null, null, null, 'jQuery/bubbleEngine/images/twitter.png');
      });
    }
  </script>
</head>
<body>
  <div id="control">
    <div id="header"></div>
    <h1>Bubble</h1>
    <div id="particleSizeMinMax"></div>
    <div id="Info_particleSizeMinMax"></div>
    <div id="Info_type">
      Type:
      <button id="icon1">
        <img height="16" src="jQuery/bubbleEngine/images/heart.png"></button>
      <button id="icon2">
        <img height="16" src="jQuery/bubbleEngine/images/bubble.png"></button>
      <button id="icon3">
        <img height="16" src="jQuery/bubbleEngine/images/twitter.png"></button>
    </div>
    <h1>Livetime</h1>
    <div id="particleAnimationDuration">
    </div>
    <div id="Info_particleAnimationDuration">
    </div>
    <h1>Distance</h1>
    <div id="particleScatteringX">
    </div>
    <div id="Info_particleScatteringX">
    </div>
    <div id="particleScatteringY">
    </div>
    <div id="Info_particleScatteringY">
    </div>
    <button id="xxx">(+) Add a new Bubble Maschine</button>
  </div>
  <div id="SoapBubbleMachineNumber1" class="SoapBubbleMachine">
    <img src="jQuery/bubbleEngine/images/Bubble-Machine-R.png">
    <button class="add">50</button>
    <button class="remove">OFF</button>
    <button class="direction">< Turn Left</button>
  </div>
  <div id="SoapBubbleMachineNumber2" class="SoapBubbleMachine">
    <img src="jQuery/bubbleEngine/images/Bubble-Machine-L.png">
    <button class="add">20</button>
    <button class="remove">OFF</button>
    <button class="direction">Turn Right ></button>
  </div>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

jQueryのBubbleEngineプラグインで泡を発生させる

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

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

jQueryのBubbleEngineプラグインで泡を発生させる

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

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