jQuery和CSS计数器

jQuery和CSS计数器477
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;
}

也许你还喜欢