jquery计数器动画特效

这是一款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">      

 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">
                    < span class="counter-value">75
                    < h3 class="title">Web Design
                
            
        
        < div class="col-md-3 col-sm-6">
            < div class="counter">
                < div class="counter-content">
                    < i class="counter-icon fa fa-rocket">
                    < span class="counter-value">100
                    < h3 class="title">Web Development
                
            
        
    

 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));
        }
    });
});