jQuery+css实现炫目的动态块漂移效果
内容摘要
本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
运行效果截图如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
文章正文
本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <!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程序设计有所帮助。
代码注释