本文实例讲述了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+'"); 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"> </div> </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。