JS实现文字掉落效果的方法

本文实例讲述了JS实现文字掉落效果的方法。分享给大家供大家参考。具体实现方法如下：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="jquery-1.6.2.min.js" type="text/javascript"></script><style type="text/css">.canvas{width:500px;height:500px;position:relative;}</style></head><body><div><input type="button" onclick="javascript:falling.init（）;" value="GO" /></div><div class="canvas" id="canvas"></div><script type="text/javascript">/**坠落效果*/function Falling（）{ this.dict=["abcd","2222","sign","next","container","content","last","break","less","than","that","absolute","relative","my","index","html","java","c#","web","javascript","php","include","shit","bull","big","smart","call","apply","callee","caller","function"]; this.canvas=$（"#canvas"）; this.step=15; this.freq=10; this.height=500; this.width=500; this.si=null;}Falling.prototype={ fallingAction:function（dom）{var self=this;var freqs=[10,15,20];//每次下落的距离var disS=[];//记录所有dom的当前距离var disPerFreqS=[];//每个dom的var targetDis=500;var domCssTopS=[];//所有dom的top属性var successDom=[];//记录哪些dom已经结束运动var successCount=0;//有多少个dom已经结束var total=dom.length;var freqMarkLength=freqs.length;for（var i=0,j=dom.length;i<j;i++）{ domCssTopS[i]=dom[i].position（）.top; disS[i]=0; disPerFreqS[i]=freqs[parseInt（Math.random（）*freqMarkLength）];}self.si=setInterval（function（）{ if（successCount>=total）{clearInterval（self.si）; } for（var i=0,j=dom.length;i<j;i++）{if（typeof（successDom[i]）！="undefined" && successDom[i]=="ok"）{ continue;}disS[i] += disPerFreqS[i];if（disS[i] >= targetDis）{ dom[i].css（"top", targetDis+domCssTopS[i]）; successDom[i]="ok"; successCount++;;}else{ dom[i].css（"top", disS[i]+domCssTopS[i]）;} }},self.freq）; }, init:function（）{var self=this;self.canvas.html（""）;var dom=[];var l=0;var t=0;var tempDom=$（"<div style="position;absolute;left:-100000;visibility:hidden"></div>"）.appendTo（$（"body"））;for（var i=0,j=self.dict.length;i<j;i++）{ dom[i]=$（"<span style="position:absolute">"+self.dict[i]+"</span>"）.appendTo（tempDom）; var domWidth=dom[i].width（）; var domHeight=dom[i].height（）; if（t<self.height）{if（l<self.width）{ if（domWidth+l<=self.width）{dom[i].css（{"top":t,"left":l}）;self.canvas.append（dom[i]）;l += dom[i].width（）; }else{if（domHeight+t<=self.height）{ t=t+domHeight; dom[i].css（{"top":t,"left":0}）; self.canvas.append（dom[i]）; l = dom[i].width（）;}else{ break;//到极限了} }}else{if（domHeight+t<=self.height）{ t=t+domHeight; l=0; dom[i].css（{"top":t,"left":l}）; self.canvas.append（dom[i]）;}else{ break;//到极限了}} }//else极限}/*for（var i=0,l=self.dict.length;i<l;i++）{ self.fallingAction（dom[i]）;}*/self.fallingAction（dom）; }}var falling=new Falling（）;falling.init（）;</script></body></html>
希望本文所述对大家的javascript程序设计有所帮助。