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