css样式
.number-animate{line-height:78px; height: 78px;overflow: hidden; display: inline-block; position: relative; }
.number-animate .number-animate-dot{ width: 40px; float: left; text-align: center;}
.number-animate .number-animate-dom{ width: 40px; text-align: center; float: left; position: relative; top: 0;}
.number-animate .number-animate-dom span,.number-animate .number-animate-dot span{float: left;width: 100%;height: 78px;line-height: 1.1;}
js插件Odometer.js
const Odometer = (function(win,doc) {
class OdometerFn {
constructor(x, y) {
this.setting = {
len : null, //默认最小位数
speed : 3000,//动画速度
num : "0", //初始化值
symbol : '',//默认的分割符号,千,万,千万
dot : 0 ,//保留几位小数点
zero : true,
replay: true // 重新翻牌
}
this.$parent = doc.querySelector(x);
this.html = `<div class="number-animate-dom" data-num="{{num}}">
<span class="number-animate-span">0</span>
<span class="number-animate-span">1</span>
<span class="number-animate-span">2</span>
<span class="number-animate-span">3</span>
<span class="number-animate-span">4</span>
<span class="number-animate-span">5</span>
<span class="number-animate-span">6</span>
<span class="number-animate-span">7</span>
<span class="number-animate-span">8</span>
<span class="number-animate-span">9</span>
<span class="number-animate-span">0</span>
<span class="number-animate-span">.</span>
</div>`;
this.extend( this.setting, y );
this.init(this.$parent,y)
}
init (x,y){
x.innerHTML = this.setNumDom(this.numToArr(this.setting.num))
this.animate(x);
};
animate ($parent){//执行动画
let $dom = $parent.querySelectorAll( '.number-animate-dom' );
for(let o of $dom ){
let num = o.getAttribute('data-num');
if(this.setting.zero) num = (num==0?10:num);
this._height = o.offsetHeight/12;
o.style['transform'] = o.style['-webkit-transform'] = 'translateY(' + (num=="." ? -11 * this._height : -num * this._height)+'px)';
o.style['transition'] = o.style['-webkit-transition'] = (num=="." ? 0 : this.setting.speed/1000)+'s'
}
}
setNumDom (arrStr){//分割符号
let shtml = '<div class="number-animate">';
arrStr.forEach((o,i)=>{
if(i != 0 && (arrStr.length-i)%3 == 0 && this.setting.symbol != "" && o!="."){
shtml += '<div class="number-animate-dot"><span>'+this.setting.symbol+'</span></div>'+this.html.replace("{{num}}",o);
}else{
shtml += this.html.replace("{{num}}",o);
}
});
shtml += '</div>';
return shtml;
}
update (num){
let newArr = this.numToArr(num),$dom = this.$parent.querySelectorAll(".number-animate-dom");
if(this.setting.replay || $dom.length != newArr.length){
this.$parent.innerHTML = this.setNumDom(this.numToArr(num))
}else{
;[].forEach.call($dom,(o,i)=>{
o.setAttribute('data-num',newArr[i]);
});
}
this.animate(this.$parent);
}
numToArr (num){
num = parseFloat(num).toFixed(this.setting.dot);
let arrStr = typeof(num) == 'number' ? num.toString().split("") : num.split("")
let arrLen = arrStr.length;
if(arrStr.length <=this.setting.len){
for(let _lens = 0;_lens<this.setting.len - arrLen;_lens++){
arrStr.unshift(0)
}
}
return arrStr;
}
extend (n,n1){
for(let i in n1){n[i] = n1[i]};
}
}
return OdometerFn;
})(window,document);
html页面部分需要翻牌的数字使用<span>标签
样例代码
//**************************************数字翻牌************************************
var gdzs = new Odometer('#gdzs',{
num : 28286
});
var gdzs_num = 28286;
/** 数字播放 */
function num_play(){
setTimeout(function(){
gdzs.update(gdzs_num);
},100);
}
num_play();
setInterval(function(){
num_play();
}, 10*1000)