本文執行個體講述了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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
