这是一款jquery计数器动画特效。该jquery计数器动画特效使用bootstrap网格系统进行布局，然后通过jQuery animate方法来制作炫酷的计数器动画特效。
使用方法
在页面中引入jquery，bootstrap.min.css和font-awsome.min.css文件。
<link href="dist/bootstrap.min.css" rel="stylesheet"><link href="dist/font-awsome.min.css" rel="stylesheet"><script src="js/jquery.min.js"></script>
HTML结构
计数器的HTML结构如下：
<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="counter"> <div class="counter-content"> <i class="counter-icon fa fa-globe"></i> <span class="counter-value">75</span> <h3 class="title">Web Design</h3> </div> </div> </div> <div class="col-md-3 col-sm-6"> <div class="counter"> <div class="counter-content"> <i class="counter-icon fa fa-rocket"></i> <span class="counter-value">100</span> <h3 class="title">Web Development</h3> </div> </div> </div> </div></div>
CSS样式
为计数器添加下面的CSS样式：
.counter{ background: #7a7fb6; text-align: center; position: relative;}.counter .counter-content{ padding: 30px 20px 50px; color: #fff; position: relative;}.counter:before,.counter:after,.counter .counter-content:before,.counter .counter-content:after{ content: ""; width: 20px; height: 20px; border-radius: 50%; background: #fff; position: absolute; box-shadow: inset 0 2px 2px #000; top: 15px; left: 15px;}.counter:after{ left: auto; right: 15px;}.counter .counter-content:before,.counter .counter-content:after{ box-shadow: inset 0 -2px 2px #000; top: auto; bottom: 15px;}.counter .counter-content:after{ left: auto; bottom: 15px; right: 15px;}.counter .counter-icon{ display: inline-block; font-size: 40px; margin-bottom: 15px;}.counter .counter-value{ display: block; font-size: 50px; margin-bottom: 15px;}.counter .title{ font-size: 20px; text-transform: uppercase; text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.71);}@media only screen and (max-width: 990px){ .counter{ margin-bottom: 20px; }} Javascript
在页面DOM元素加载完毕之后，通过下面的方法来初始化该jquery计数器。
$('.counter-value').each(function(){ $(this).prop('Counter',0).animate({ Counter: $(this).text() },{ duration: 3500, easing: 'swing', step: function (now){ $(this).text(Math.ceil(now)); } });}); 