百度空间关门了,虽然不好用也用了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