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

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

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title/title script src=' http 3360 jquery-1。7 .1 .量滴js ' type=' text/JavaScript '/script type=' for(var I=0；I 3；I){颜色。推(数学。圆(数学。random()* 256))；}返回rgb(' color.join('，')')' }函数createRect(左，顶，索引){ var width=math。圆(数学。random()* 150)10；var height=数学。圆(数学。random()* 150)10；左侧=左侧宽度？左侧-宽度：左侧；顶部=顶部高度？顶高：顶；var html=[]；html。push(' div id=' rect _ ' index ' ' class=' rect shadow radius ' style=' background : ')；html。push(CreateColor())；html。push('；左：’)；html.push(左);html。push(' px；top :’)；html.push(顶部);html。push(' px；宽度：';html.push(宽度);html。push(' px；高度：');html.push(高度);html。push(' px；/div ')；返回html。联接(" ")；}函数initRect(){ var body=$(' # body ')；可变宽度=车身。宽度()；可变高度=身体。高度()；定义变量索引=新日期()。getTime()；尸体。追加(createRect(math . round(math . random()*宽度)数学。圆(数学。随机()*高度)、指数)；设置动画(索引，高度);}函数setAnimate(索引，高度){ var rect=$(' # rect _ ' index)；var top=parseInt(rect.position().顶部);var自身高度=rect。高度()；如果(顶部高度-自身高度){ rect。移除()；initRect()；} else { var filter=top/height；rect.css({ 'top': (top 5) 'px '，'不透明度' :滤镜});setTimeout(函数(){ setAnimate(索引，高度));}, 33);} }函数{ for(var I=0；I 20I){ initRect()；} } $(文档)。ready(function(){ initAllRect()；});/script style type='text/css ' .rect { background: # DDDDDD宽度宽度：100像素高度：100 px位置：绝对；} .半径{ border-radius :8 px-moz-边界-半径：8 px-web套件-边框-半径：8 px} .阴影{-moz-box-shadow :-5px-5px 5px # 999插图；-web套件-box-shadow :-5px-5px 5px # 999插图；box-shadow:-5px -5px 5px #999插图；} # body { height:700px宽度：100%;背景：黑色；margin :0 }/style/head dydiv id=' body ' class=' shadow radius '/div/body/html更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 及《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。