java 静态块和动态块_jQuery+css实现炫目的动态块漂移效果

本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

function createColor() {

var color = [];

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

color.push(Math.round(Math.random() * 256));

}

return "rgb(" + color.join(",") + ")"

}

function createRect(left, top, index) {

var width = Math.round(Math.random() * 150) + 10;

var height = Math.round(Math.random() * 150) + 10;

left = left > width ? left - width : left;

top = top > height ? top - height : top;

var html = [];

html.push('

return html.join("");

}

function initRect() {

var body = $("#body");

var width = body.width();

var height = body.height();

var index = new Date().getTime();

body.append(createRect(Math.round(Math.random() * width), Math.round(Math.random() * height), index));

setAnimate(index, height);

}

function setAnimate(index, height) {

var rect = $("#rect_" + index);

var top = parseInt(rect.position().top);

var selfHeight = rect.height();

if (top > height - selfHeight) {

rect.remove();

initRect();

} else {

var filter = top / height;

rect.css({ "top": (top + 5) + "px", "opacity": filter });

setTimeout(function () {

setAnimate(index, height);

}, 33);

}

}

function initAllRect() {

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

initRect();

}

}

$(document).ready(function () {

initAllRect();

});

.rect {

background:#DDDDDD;

width:100px;

height:100px;

position:absolute;

}

.radius

{

border-radius:8px;

-moz-border-radius:8px;

-webkit-border-radius:8px;

}

.shadow

{

-moz-box-shadow:-5px -5px 5px #999 inset;

-webkit-box-shadow:-5px -5px 5px #999 inset;

box-shadow:-5px -5px 5px #999 inset;

}

#body { height:700px; width:100%; background:black; margin:0; }

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。