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

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

具体代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script src="jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript" >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（"<div id="rect_"+index+"" class="rect shadow radius" style="background:"）;html.push（createColor（））;html.push（";left:"）;html.push（left）;html.push（"px;top:"）;html.push（top）;html.push（"px;width:"）;html.push（width）;html.push（"px; height:"）;html.push（height）;html.push（"px;"></div>"）;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（）;}）;</script><style type="text/css" >.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; }</style></head><body><div id="body" class="shadow radius"></div></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。