数字变化效果

html

<div class="zcyc">
            <div class="yc-num">
                ￥
                <div>
                    <span class="num12">
                        <div>2</div>
                    </span>
                    <span class="num11">
                        <div>5</div>
                    </span>
                    <span class="num10">
                        <div>0</div>
                    </span>
                </div>
                ,
                <div>
                    <span class="num9">
                        <div>0</div>
                    </span>
                    <span class="num8">
                        <div>0</div>
                    </span>
                    <span class="num7">
                        <div>1</div>
                    </span>
                </div>
                ,
                <div>
                    <span class="num6">
                        <div>2</div>
                    </span>
                    <span class="num5">
                        <div>2</div>
                    </span>
                    <span class="num4">
                        <div>6</div>
                    </span>
                </div>
                ,
                <div>
                    <span class="num3">
                        <div>7</div>
                    </span>
                    <span class="num2">
                        <div>2</div>
                    </span>
                    <span class="num1">
                        <div>0</div>
                    </span>
                </div>
            </div>
        </div>

css

.zcyc .yc-num{
  color:#fff;
  font-size:84px;
  margin-top:20px
}
.zcyc .yc-num > div{
  display: inline-block;
  background:url(../image/num.png) center no-repeat;
  width:187px;
  height:98px;
  line-height:98px;
  text-align: center;
  overflow:hidden;
  // letter-spacing: 25px;
  // padding-left:20px
}
.zcyc .yc-num > div span{
  display: inline-block;
  width:48px;
  height:98px;
  text-align:center;
  overflow:hidden
}

js

var numChange_time = 500,
    numChange_set;
numChange();
function numChange(obj){
    if(numChange_set){
        clearTimeout(numChange_set)
    }
    // numJudge('.num1')
    // 取随机数
    var num = Math.round(Math.random() * 100);
    var czNum = '';  // 页面值变量
    // 获取页面值
    for(var i = 12;i > 0;i--){
        czNum += $('.num'+i+' div:eq(0)').text()
    }
    // 计算要展示的数据  并转换成字符串
    var nextNum = String(parseFloat(czNum) + num);
    for(var i = 1;i <= nextNum.length;i++){
        $(function(i){
            // 按位数截取要展示的数字
            var nextVal = nextNum.substr(-i,1);
            // 获取现在位数上展示的数字
            var nowVal = $('.num'+i+' div:eq(0)').text();
            // 判断要显示的值是否和现在一样
            if(nextVal != nowVal){
                // 判断是否是奇数
                // 奇数位 向上切换
                // 偶数位 向下切换
                if(i%2 != 0){
                    // 添加要显示的值
                    $('.num'+i).append('<div>'+nextVal+'</div>')
                    // 值切换效果
                    $('.num'+i+' div:eq(0)').animate({marginTop:'-98px'}, 200,function(){
                        // 移除div   被替换的值
                        $('.num'+i+' div:eq(0)').remove();
                    })
                }else{
                    // 添加要显示的值
                    $('.num'+i).prepend('<div style="margin-top:-98px">'+nextVal+'</div>')
                    // 值切换效果
                    $('.num'+i+' div:eq(0)').animate({marginTop:'0px'}, 200,function(){
                        // 移除div   被替换的值
                        $('.num'+i+' div:eq(1)').remove();
                    })
                }


            }
        }(i))
    }
    // 延迟函数
    numChange_set = setTimeout(numChange,numChange_time)
}