JS实现文字掉落效果的方法
本文实例讲述了JS实现文字掉落效果的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru"> <head> <title></title> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <scriptsrc="jquery-1.6.2.min.js"type="text/javascript"></script> <styletype="text/css"> .canvas{ width:500px; height:500px; position:relative; } </style> </head> <body> <div> <inputtype="button"onclick="javascript:falling.init();"value="GO"/> </div> <divclass="canvas"id="canvas"></div> <scripttype="text/javascript"> /* *坠落效果 */ functionFalling(){ 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){ varself=this; varfreqs=[10,15,20];//每次下落的距离 vardisS=[];//记录所有dom的当前距离 vardisPerFreqS=[];//每个dom的 vartargetDis=500; vardomCssTopS=[];//所有dom的top属性 varsuccessDom=[];//记录哪些dom已经结束运动 varsuccessCount=0;//有多少个dom已经结束 vartotal=dom.length; varfreqMarkLength=freqs.length; for(vari=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(vari=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(){ varself=this; self.canvas.html(''); vardom=[]; varl=0; vart=0; vartempDom=$("<divstyle='position;absolute;left:-100000;visibility:hidden'></div>").appendTo($("body")); for(vari=0,j=self.dict.length;i<j;i++){ dom[i]=$("<spanstyle='position:absolute'>"+self.dict[i]+"</span>").appendTo(tempDom); vardomWidth=dom[i].width(); vardomHeight=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(vari=0,l=self.dict.length;i<l;i++){ self.fallingAction(dom[i]); } */ self.fallingAction(dom); } } varfalling=newFalling(); falling.init(); </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。