JS实现文字掉落效果的方法
网络编程 2021-07-04 21:47www.168986.cn编程入门
这篇文章主要介绍了JS实现文字掉落效果的方法,可实现文字往下掉落最终排序正常显示的效果,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现文字掉落效果的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://.w3./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的属性 var suessDom=[];//记录哪些dom已经结束运动 var suessCount=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().; disS[i]=0; disPerFreqS[i]=freqs[parseInt(Math.random()*freqMarkLength)]; } self.si=setInterval(function(){ if(suessCount>=total){ clearInterval(self.si); } for(var i=0,j=dom.length;i<j;i++){ if(typeof(suessDom[i])!="undefined" && suessDom[i]=="ok"){ continue; } disS[i] += disPerFreqS[i]; if(disS[i] >= targetDis){ dom[i].css("", targetDis+domCssTopS[i]); suessDom[i]="ok"; suessCount++;; }else{ dom[i].css("", 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({"":t,"left":l}); self.canvas.append(dom[i]); l += dom[i].width(); }else{ if(domHeight+t<=self.height){ t=t+domHeight; dom[i].css({"":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({"":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程序设计有所帮助。
上一篇:js实现鼠标滑过文字链接色彩变化的效果
下一篇:DOM 高级编程
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程