立体式数字滚动 html,数字滚动效果

HtmlCssJs

35

Years

150

Employees

ul {

list-style-type:none;

}

li {

margin-bottom: 50px;

}

li h1 {

font-family: impact;

font-size: 60px;

font-weight:normal;

margin: 0;

padding: 0;

}

li p {

display: block;

margin-top: -2px;

font-family: arial;

font-size: 12px;

color: #999;

}

$('.count').each(function () {

(function rec(self, cnt) {

$(self).prop('Counter',0).animate({

Counter: cnt

}, {

duration: 2000,

easing: 'swing',

step: function (now) {

$(self).text(Math.ceil(now));

},

complete : function() {

setTimeout(function() {

rec(self, cnt);

}, 2000);

}

});

}(this, $(this).text()));

});

/*

$('.count').each(function anim() {

$(this).prop('Counter',0).animate({

Counter: $(this).text()

}, {

duration: 2000,

easing: 'swing',

step: function (now) {

$(this).text(Math.ceil(now));

},

complete: function(){

$(this).css('counter',0);

setTimeout(anim.bind(this),1000);

}

});

});

*/

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3