js实现的彩色方块飞舞奇幻效果

本文实例讲述了射流研究…实现的彩色方块飞舞奇幻效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html html标题演示/标题样式类型=' text/CSS '正文{ margin :0划水：0;} ul { list-style :无；余量：0划水：0;} Li { position : absolute } # power { font-size :50 px；线高：100 pxborder:2px纯绿色；颜色：绿色；位置：绝对；right :20 pxbottom :20 px }/style/head body ul id=' canvas '/ul/body脚本类型=' text/JavaScript ' var $=function(id){ return document。getelementbyid(id)；} var $_name=function(标记){返回文档。getelementsbytagname(标记);} var color=function(){ var _ color=' RGB '；_ color=数学。圆(数学。random()* 255)；_color='，'；_ color=数学。圆(数学。random()* 255)；_color='，'；_ color=数学。圆(数学。random()* 255)；_ color=')'；return _ color } var create Li=function(attr){ var ele=document。创建元素(“李”)；埃勒。风格。背景颜色=attr。bgCOlOr | | ' black埃勒。风格。左=attr。左“px”；埃勒。风格。top=attr。top ' px埃勒。风格。宽度=ele。风格。高度=' 15px埃勒。onmouseover=function(){ var _ self=this；var _ rotate=0；if(_ self。interval){ clearInterval(_ self。间隔)；_ self。风格。背景颜色=_ self ._ backgroundColorBK} _self ._背景colorbk=_ self。风格。背景颜色；_ self。风格。背景颜色=COlOr()；_ self。区间=设置区间(function(){ _ self。风格。webkittransform=' rotate '(_ rotate ' deg ')；_ rotate=30if(_旋转360 ){ clearInterval(_ self。间隔)；_ self.onmouseover=null_ self。风格。背景颜色=_ self ._ backgroundColorBKmove(_ self)；返回；} }, 100);}返回ele} var loca={ x: 1000，y : 0 }；var move=function(obj){ var _ self=obj；var CurX=ParSeint(_ self。风格。左)；var CuRy=ParSeint(_ self。风格。顶部)；var Sx=loca。x-CurX；var Sy=loca。y-CuRy；var ADDx=Sx/36；var AdDy=Sy/36；var rotate=0；var背景colorbk=_ self。风格。背景颜色；_ self。区间=设置区间(function(){ _ self。风格。width=_ self。风格。height=(parent(_ self。风格。高度)5)' px '；_ self。风格。webkittransform=' rotate '(' rotate ' deg ')；curX=addXcurY=addY_ self。风格。left=CurX ' px_ self。风格。top=CuRy ' px_ self。风格。背景颜色=COlOr()；旋转=10;如果(旋转360 ){ _ self。风格。左=loca。x ' px_ self。风格。top=loca。y ' pxclearInterval(_ self。间隔)；_ self。风格。背景色=背景色bk；返回；} }, 30);} var init=function(){ var ul=$(' canvas ')；for(var I=50；i90I){ for(var j=50；j90j ) { var color='rgb(' i '，' j '，' math。圆(数学。random()* 255)')'；ul。appendchild(创建Li({ bgcolor : color，left:(j-50)*16，top :(I-50)* 16 })；} } } var main=function(){ init()；} main()；/script/html更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 、 《jQuery常见经典特效汇总》 及《JavaScript动画特效与技巧汇总》

希望本文所述对大家Java脚本语言程序设计有所帮助。