大佬教程收集整理的这篇文章主要介绍了基于HTML5+css3的数字反转切换效果，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
懒得搬家也得搬～
这是一段基于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的数字反转切换效果全部内容，希望文章能够帮你解决基于HTML5+css3的数字反转切换效果所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。