javaScript特效--0,1数字下落

   今天看js的特效,发现挺有趣的,下面就是实现0,1数字下落的代码,是copy的徐长伟老师《常用JavaScript特效》里的代码。

if (document.all){
 Cols=8;
 Cl=36;//Space's are included so real length is 48!
 Cs=20;
 Ts=14;
 Tc='#008800';
 Tc1='#00ff00';
 MnS=10;
 MxS=30;
 I=Cs;
 Sp=new Array();S=new Array();Y=new Array();
 C=new Array();M=new Array();B=new Array();
 RC=new Array();E=new Array();Tcc=new Array(0,1);
 document.write("<div id='Container' style='position:absolute;top:0;left:-"+Cs+"'>");
 document.write("<div style='position:relative'>");
 for(i=0; i < Cols; i++){
  S[i]=I+=Cs;
  document.write("<div id='A' style='position:absolute;top:0;font-family:Arial;font-size:"
  +Ts+"px;left:"+S[i]+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden'></div>");
 }
 document.write("</div></div>");
 
 for(j=0; j < Cols; j++){
  RC[j]=1+Math.round(Math.random()*Cl); 
  Y[j]=0;
  Sp[j]=Math.round(MnS+Math.random()*MxS);
  for(i=0; i < RC[j]; i++){
    B[i]='';
    C[i]=Math.round(Math.random()*1)+' ';
    M[j]=B[0]+=C[i];
   }
 }
 function Cycle(){
 Container.style.top=window.document.body.scrollTop;
 for (i=0; i < Cols; i++){
  var r = Math.floor(Math.random()*Tcc.length);
  E[i] = '<font color='+Tc1+'>'+Tcc[r]+'</font>';
  Y[i]+=Sp[i];
 
  if (Y[i] > window.document.body.clientHeight){
    for(i2=0; i2 < Cols; i2++){
     RC[i2]=1+Math.round(Math.random()*Cl); 
     for(i3=0; i3 < RC[i2]; i3++){
      B[i3]='';
      C[i3]=Math.round(Math.random()*1)+' ';
      C[Math.floor(Math.random()*i2)]='&nbsp;'+' ';
      M[i]=B[0]+=C[i3];
      Y[i]=-Ts*M[i].length/1.5;
      A[i].style.visibility='visible';
     }
     Sp[i]=Math.round(MnS+Math.random()*MxS);
    }
  }
  A[i].style.top=Y[i];
  A[i].innerHTML=M[i]+' '+E[i]+' ';
 }
 setTimeout('Cycle()',20)
 }
 Cycle();
}

 

运行后的页面如下(当然应该是动态的,数字向下移动):

我试图用jQuery来实现这一特效,可惜能力有限,没做出来,哪位大虾弄出来了教教我!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值