Jquery数字切换特效

2018-07-20    来源:open-open

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

[JavaScript]代码    

var NumbersAnimate={
	Target:null,
	Numbers:0,
	Duration:500,
	Animate:function(){
		var array=NumbersAnimate.Numbers.toString().split("");
		//遍历数组
		for(var i=0;i<array.length;i++){
			var currentN=array[i];
			//数字append进容器
			var t=$("<span></span>");
			$(t).append("<span class=\"childNumber\">"+array[i]+"</span>");
			$(t).css("margin-left",18*i+"px");
			$(NumbersAnimate.Target).append(t);
			//生成滚动数字,根据当前数字大小来定
			for(var j=0;j<=currentN;j++){
				var tt;
				if(j==currentN){
				 tt=$("<span class=\"main\"><span>"+j+"</span></span>");
				 }else{
					 tt=$("<span class=\"childNumber\">"+j+"</span>");
				}
				$(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<oldArray.length;i++){
			var o=oldArray[i];
			var n=newArray[i];
			if(o!=n){
			   var c=$($(".main")[i]);
               var num=parseInt($(c).html());
			   var top=parseInt($($(c).find("span")[0]).css("marginTop").replace('px', '')); 
			   
			   for(var j=0;j<=n;j++){
				   var nn=$("<span>"+j+"</span>");
				   if(j==n){
					   nn=$("<span>"+j+"</span>");
				   }else{
					   nn=$("<span class=\"yy\">"+j+"</span>");
				   }
				   $(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));   
	}
}

QQ图片20150703091425.png    

标签: 代码

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:jQuery顶部浮动代码

下一篇:Linux系统下UDP发送和接收广播消息