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>
