jQuery代码
jQuery(document).ready(function() {
function count($this){
var current = parseInt($this.html(), 10);
current = current + 1; /* Where 1 is increment */
$this.html(++current);
if(current > $this.data('count')){
$this.html($this.data('count'));
} else {
setTimeout(function(){count($this)}, 50);
}
}
jQuery(".stat-count").each(function() {
jQuery(this).data('count', parseInt(jQuery(this).html(), 10));
jQuery(this).html('0');
count(jQuery(this));
});
});
HTML代码
<div class="stat">
<span class="stat-count">4200</span>
<p class="stat-detail">Subscribers</p>
</div>
CSS代码
.stat {
padding:20px 5px;
background:#336699;
text-align:center;
float:left;
margin-left:100px;
width:150px;
}
.stat-count {
font-size: 51px;
font-weight: normal;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 20px;
overflow:hidden;
font-family:"Georgia", Courier, monospace;
padding: 0;
position: relative;
}
.stat-detail {
color:#fff;
padding-top:10px;
font: italic 1.3rem/1.75 "Georgia", Courier, monospace;
}