html 颗粒效果,HTML 5个画布颗粒

$(window).load(function(){

bubbleController.init();

setInterval(function(){

bubbleController.update()

}, 200);

$(window).resize(function(){

bubbleController.setBoundaries();

});

if($(".leftcolumn").length)

{

//main page

var leftColumn = parseInt($(".leftcolumn").height(), 10);

var rightColumn = parseInt($(".rightcolumn").height(), 10);

/* Going to add extra stuff if the columns are uneven */

}

else{

swapTwitterPix();

}

});

var bubbleController = {

bubbles : [],

screenWidth : 0,

leftEdge : 0,

rightEdge : 0,

channelWidths : [],

minBubbleWidth : 10,

maxBubbleWidth : 100,

init : function(){

this.setBoundaries();

$("

for(var i = 0; i < 18; i++) {

var side = (i % 2 === 0) ? 1 : 0;

var bub = new bubble();

this.bubbles.push(bub);

var width = Math.floor(Math.random() * this.maxBubbleWidth) + this.minBubbleWidth;

bub.init(

this.getXPos(side),

Math.floor(Math.random() * 800),

side,

(Math.random()*20/100).toFixed(2),

width,

Math.floor((((this.maxBubbleWidth + this.minBubbleWidth) - width)/8)/5) + 1,

"#bubbleContainer");

}

},

getXPos : function(blnLeftOrRight) {

var xpos = (Math.random() * this.channelWidths[ blnLeftOrRight ]);// + (this.maxBubbleWidth/2);

return Math.floor( xpos/(this.channelWidths[ blnLeftOrRight ]) * 100);

},

setBoundaries : function() {

this.screenWidth = $("body").width();

this.leftEdge = $("#outerWrapper").position().left;

this.rightEdge = this.leftEdge + 1040;

this.channelWidths[ 0 ] = this.leftEdge < 150 ? 150 : this.leftEdge;

this.channelWidths[ 1 ] = this.screenWidth - this.rightEdge;

},

update : function() {

$.each(this.bubbles, function() {

this.update();

});

}

};

function bubble(){

this.domRef;

this.diameter;

this.x;

this.xPerc;

this.y;

this.side;

this.opacity;

this.speed;

this.init = function(x, y, side, opacity, diameter, speed, addToElement){

this.side = side;

this.xPerc = x;

this.y = y;

this.speed = speed;

this.opacity = opacity;

this.diameter = diameter;

this.domRef = $("

.addClass("bubble")

.css("top", this.y)

.css("left", this.getXPos())

.css("opacity", this.opacity)

.appendTo($(addToElement));

//.css("z-index", "-1")

var img = $("")

//.attr("src", baseUrl + "/images/circle_" + this.colour + "_des.png")

.attr("src", "/images/circleeye.png")

.attr("height", this.diameter)

.appendTo(this.domRef)

.show()

/*.load(function(){

// Whoa... cpu == 90% for long fades

$(this).fadeIn(20000);

});*/

};

this.getXPos = function() {

this.x = (bubbleController.channelWidths[ this.side ] * (this.xPerc/100)) - (this.diameter/2);

this.x += this.side == 1 ? bubbleController.rightEdge : 0;

return this.x;

};

this.update = function() {

this.y -= this.speed;

this.x = this.getXPos();

if(this.y < -this.diameter) {

this.y = 800;

this.xPerc = bubbleController.getXPos(this.side);

this.x = this.getXPos();

this.opacity = (Math.random()*15/100).toFixed(2);

this.fireFadeIn();

}

this.updateDom();

};

this.setInit = function(){

};

this.updateDom = function() {

this.domRef

.css("top", this.y)

.css("left", this.x);

};

this.fireFadeIn = function() {

this.domRef

.hide()

.css("opacity", this.opacity)

.fadeIn(5000);

};

}

附：有没有什么真的HTML5关于这从我快速阅读的标记和JavaScript