欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery+css实现炫目的动态块漂移效果_jquery

程序员文章站 2022-03-18 21:37:52
...
本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery+css实现炫目的动态块漂移效果_jquery

具体代码如下:



'); 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