Jquery数字切换特效详解编程语言

[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>"); 
			$(t).append("<span class=/"childNumber/">"+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=$("<span class=/"main/"><span>"+j+""); 
				 }else{ 
					 tt=$("<span class=/"childNumber/">"+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<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+""); 
				   if(j==n){ 
					   nn=$("<span>"+j+""); 
				   }else{ 
					   nn=$("<span class=/"yy/">"+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));    
	} 
} 

QQ图片20150703091425.png    

Jquery数字切换特效详解编程语言

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8588.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论