jQuery+css实现炫目的动态块漂移效果_jquery
程序员文章站
2022-04-18 09:40:07
...
本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考，具体如下：
');
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
运行效果截图如下：
具体代码如下：