星鸿娱乐平台Jquery数字上下滚动动态切换插件 - 星鸿娱乐平台【授权指定首页】

常见问题当前位置:星鸿娱乐 > 常见问题 > >

星鸿娱乐平台Jquery数字上下滚动动态切换插件

  

[Jquery,数字上下滚动,动态切换]Jquery数字上下滚动动态切换插件

  

Jq打造的数字滚动插件,数字变化时,动态滚动切换,效果非常好。

  

  

我们先来看示例:  

  

CSS  
  

  
  
  .textC {  position:absolute;  width:500px;  overflow:hidden;  margin-top: 100px;  line-height:30px;  margin-left: 300px;  height:30px;  }  .textC span {  color: #13BEEC;  font-size: 28px;  font-weight: bold;  font-family: Georgia, "Times New Roman", Times, serif;  position: absolute;  }  
  
  

HTML  

  

代码如下:

  
  

随机切换数字  
  

  

  

JS  

  
  
  $(function(){  NumbersAnimate.Target=$(".textC");  NumbersAnimate.Numbers=12389623;  NumbersAnimate.Duration=1500;  NumbersAnimate.Animate();  });  var NumbersAnimate={  Target:null,  Numbers:0,  Duration:500,  Animate:function(){  var array=NumbersAnimate.Numbers.toString().split("");  //遍历数组  for(var i=0;i星鸿娱乐 currentN=array[i];  //数字append进容器  var t=$("");  $(t).append(""+array[i]+"");  $(t).css("margin-left",18*i+"px");  $(NumbersAnimate.Target).append(t);  //生成滚动数字,根据当前数字大小来定  for(var j=0;j<=currentN;j++){  var tt;  if(j==currentN){  tt=$(""+j+"");  }else{  tt=$(""+j+"");  }  $(t).append(tt);  $(tt).css("margin-top",(j+1)*25+"px");  }  $(t).animate({marginTop:-((parseInt(currentN)+1)*25)+"px"},NumbersAnimate.Duration,function(){  $(this).find(".childNumber").remove();  });  }  },  ChangeNumber:function(numbers){  var oldArray=NumbersAnimate.Numbers.toString().split("");  var newArray=numbers.toString().split("");  for(var i=0;i"+j+"");  if(j==n){  nn=$(""+j+"");  }else{  nn=$(""+j+"");  }  $(c).append(nn);  $(nn).css("margin-top",(j+1)*25+top+"px");  }  var margintop=parseInt($(c).css("marginTop").replace('px', ''));  $(c).animate({marginTop:-((parseInt(n)+1)*25)+margintop+"px"},NumbersAnimate.Duration,function(){  $($(this).find("span")[0]).remove();  $(".yy").remove();  });  }  }  NumbersAnimate.Numbers=numbers;  },  RandomNum:function(m,a){  var Range = a - m;  var Rand = Math.random();  return(m + Math.round(Rand * Range));  }  }  
  
  

插件使用非常简单  
  1. 第一次调用时  

  
  
  NumbersAnimate.Target=$(".textC");  NumbersAnimate.Numbers=12389623;  NumbersAnimate.Duration=1500;  NumbersAnimate.Animate();  
  
  

2. 如果数字改变了,再次调用就只需要调用Change函数即可  

  
  
  NumbersAnimate.ChangeNumber();  
  
  

该插件有3个参数,分别是:  
  

  

Target:数字的父级容器  
  Numbers:显示的数字  
  Duration:滚动速度,单位是毫秒
  

  

使用注意:当数字改变后调用Change方法时,需要保证改变后的数字和之前的数字位数一致。

  

(责任编辑:admin)

上一篇:星鸿娱乐平台3D棋牌游戏在市场发展中所占的位置

下一篇:星鸿娱乐平台Egret引擎开发指南之创建项目

推荐内容

客户服务热线

010-400-12345

在线客服