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


Posted in Javascript onMay 06, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Js+XML 操作
Sep 20 Javascript
ie和firefox中img对象区别的困惑
Dec 27 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
DOM 高级编程
May 06 #Javascript
js获得当前系统日期时间的方法
May 06 #Javascript
js字符串操作方法实例分析
May 06 #Javascript
ajax+jQuery实现级联显示地址的方法
May 06 #Javascript
javascript十六进制及二进制转化的方法
May 06 #Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 #Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 #Javascript
You might like
使用PHP维护文件系统
2006/10/09 PHP
十天学会php之第五天
2006/10/09 PHP
php5中类的学习
2008/03/28 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python Django view 两种return的实现方式
2020/03/16 Python
如何用Python徒手写线性回归
2021/01/25 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
10条PHP编程习惯
2014/05/26 面试题
上海某公司.net方向笔试题
2014/09/14 面试题
what is the difference between ext2 and ext3
2013/11/03 面试题
事业单位绩效考核实施方案
2014/03/27 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
党员剖析材料范文
2014/12/18 职场文书
师范生见习总结范文
2015/06/23 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Golang生成Excel文档的方法步骤
2021/06/09 Golang
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android