基于HTML5+css3的数字反转切换效果

百度空间关门了，虽然不好用也用了8年……说关就关了～

懒得搬家也得搬～

这是一段基于HTML5+css3的数字反转切换效果，改变的数字利用css3的3D反转效果变化。

由于是基于HTML5，所以要运行这段代码首先要准备支持HTML5的浏览器～比如IE11+和最新版本的firefox、chrom都可以～

<html lang="zh-CN">
<head>
<title>数字切换效果js+css3</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

	<div style="font-weight: bold;font-size: 20px;">
		发送总量:
		<div id="num1_div" style="color: red;display: inline-block;">7777777</div>
		收到总量:
		<div id="num2_div" style="color: red;display: inline-block;">6666666</div>
	</div>

	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript">
	
		function reverseShowNum(numberDivId,showNumber){
			var $reverseDiv;
			var changeNumber;
			var oldNumber = $("#"+numberDivId).html().replace(/<.*?>/g,"");
			if( oldNumber != showNumber ){
				if((oldNumber+"").length > 0 && (showNumber+"").length == (oldNumber+"").length ){
					/* 位数相同计算反转位置 */
					oldNumberArray = (oldNumber+"").split("");
					showNumberArray = (showNumber+"").split("");
					var changeIndex = -1;
					for( i = 0 ; i < oldNumberArray.length ; i++ ){
						if( oldNumberArray[i] != showNumberArray[i] ){
							changeIndex = i;
							break;
						}
					}
					
					if( changeIndex > -1 ){
						var changeHTML = oldNumber.substring(0,changeIndex) + "<div style='display:inline-block;'>" + oldNumber.substring(changeIndex) + "</div>";
						$("#"+numberDivId).html(changeHTML);
						$reverseDiv = $("#"+numberDivId + " div");
						changeNumber = (showNumber+"").substring(changeIndex);
					}
					
				} else {
					/* 整体反转 */
					$reverseDiv = $("#"+numberDivId);
					changeNumber = showNumber;
				}
				$reverseDiv.css("transition","transform 0.5s ease 0s");
				setTimeout(function(){
					$reverseDiv.css("transform","rotateX(90deg)");
					setTimeout(function(){
						$reverseDiv.html(changeNumber);
						$reverseDiv.css("transform","rotateX(0deg)");
	 					if(changeNumber != showNumber){
	 						setTimeout(function(){
	 							$("#"+numberDivId).html(showNumber);
	 						},500)
	 					}
					},500)
				},50)
			}
		}
	
		setInterval(function(){
			reverseShowNum("num1_div",new Date().getTime());	
			reverseShowNum("num2_div",new Date().getTime()-1123);		
		},2000);
	</script>
</body>
</html>

×java风暴× QQ群：63353323

×java风暴× QQ群：63353324

基于HTML5+css3的数字反转切换效果

猜你喜欢