萬盛學電腦網 >> 腳本專題 >> javascript >> JS實現文字掉落效果的方法
JS實現文字掉落效果的方法
本文實例講述了JS實現文字掉落效果的方法。分享給大家供大家參考。具體實現方法如下：
?
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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 <!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程序設計有所幫助。
注< >：更多精彩教程請關注三聯編程
- 上一頁:DOM 高級編程
- 下一頁:js實現鼠標滑過文字鏈接色彩變化的效果
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved