Bubble theme in jQuery

Bubble effects theme like we having in window 7 theme.

I tired to give bubble effect using jQuery. Even some good feature to blow out bubbles on click.

Below are steps to give bubble effect in your page.

Head Section

---

   1: <script src=”http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.js”></script>

---

Body Section

---

   1: <body id=”bubble””> 

   2:  

   3: <script type=”text/javascript”>
   1:  
   2:  
   3: var i = 0, j = 0;
   4:  
   5:         var bubbleContent = '';
   6:  
   7:         var bubbleHight = 585;
   8:  
   9:         var bubbleWidth = 990;
  10:  
  11:         var bubbleCount = 10;
  12:  
  13:         var bubbleSpeed = 8000;
  14:  
  15:         var bubbleImgWidth = 75;
  16:  
  17:         var bubbleImgHeight = 75;
  18:  
  19:         var bubbleImages = new Array();
  20:  
  21:         bubbleImages[0] = "b1.png";
  22:  
  23:         bubbleImages[1] = "b2.png";
  24:  
  25:         bubbleImages[2] = "b3.png";
  26:  
  27:         $(document).ready(function() {
  28:  
  29:             for (i = 0, j = 0; i < bubbleCount; i++, j < bubbleImages.length - 1 ? j++ : j = 0) {
  30:  
  31:                 bubbleContent = bubbleContent + "<img id='Bubbleimg" + i + "' src='" + bubbleImages[j] + "' alt='bubble' style='top: " + (bubbleHight - bubbleImgHeight) * Math.random() + "px; left: " + (bubbleWidth - bubbleImgWidth) * Math.random() + "px; position:absolute; width:" + bubbleImgWidth + "px; height:" + bubbleImgHeight + "px' /> ";
  32:  
  33:             }
  34:  
  35:             $('#bubble').append(bubbleContent);
  36:  
  37:             for (i = 0; i < bubbleCount; i++) {
  38:  
  39:                 bubbleAnimation(i);
  40:  
  41:                 $('#Bubbleimg' + i).click(function() {
  42:  
  43:                     $(this).stop(true, false).hide((bubbleImgHeight * bubbleSpeed) / bubbleHight, function() {
  44:  
  45:                         $(this).css("top", (bubbleHight - bubbleImgHeight) + "px");
  46:  
  47:                         $(this).css("width", bubbleImgWidth + "px");
  48:  
  49:                         $(this).css("height", bubbleImgHeight + "px");
  50:  
  51:                         $(this).slideDown((bubbleImgHeight * bubbleSpeed) / bubbleHight);
  52:  
  53:                         bubbleAnimation(this.id.replace('Bubbleimg', ''));
  54:  
  55:                     }
  56:  
  57:                     );
  58:  
  59:                 });
  60:  
  61:             }
  62:  
  63:         });
  64:  
  65:         function bubbleAnimation(i) {
  66:  
  67:             $('#Bubbleimg' + i).animate({
  68:  
  69:                 top: '0px'
  70:  
  71:             },
  72:  
  73:             (bubbleSpeed * $('#Bubbleimg' + i).css('top').replace("px", "")) / bubbleHight,
  74:  
  75:             function() {
  76:  
  77:                 $('#Bubbleimg' + i).slideUp((bubbleImgHeight * bubbleSpeed) / bubbleHight,
  78:  
  79:                 function() {
  80:  
  81:                     $('#Bubbleimg' + i).css("top", (bubbleHight - bubbleImgHeight) + "px");
  82:  
  83:                     $('#Bubbleimg' + i).slideDown((bubbleImgHeight * bubbleSpeed) / bubbleHight);
  84:  
  85:                     bubbleAnimation(i);
  86:  
  87:                 }
  88:  
  89:                 );
  90:  
  91:             });
  92:  
  93:         }
  94:  
</script>