在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

jquery计算器动画

分类:插件代码 更新时间:2018-03-29 浏览次数:160

代码简介

这是一款jquery计数器动画特效。该jquery计数器动画特效使用bootstrap网格系统进行布局,然后通过jQuery animate方法来制作炫酷的计数器动画特效。

浏览器兼容

Chrome Firefox Opera Safari IE9+

使用方法

在页面中引入jquery,bootstrap.min.css和font-awsome.min.css文件。

<linkhref="dist/bootstrap.min.css"rel="stylesheet">
<linkhref="dist/font-awsome.min.css"rel="stylesheet">
<scriptsrc="js/jquery.min.js"></script>  

计数器的HTML结构如下:


    
<divclass="container">
    <divclass="row">
        <divclass="col-md-3 col-sm-6">
            <divclass="counter">
                <divclass="counter-content">
                    <iclass="counter-icon fa fa-globe"></i>
                    <spanclass="counter-value">75</span>
                    <h3class="title">Web Design</h3>
                </div>
            </div>
        </div>
        <divclass="col-md-3 col-sm-6">
            <divclass="counter">
                <divclass="counter-content">
                    <iclass="counter-icon fa fa-rocket"></i>
                    <spanclass="counter-value">100</span>
                    <h3class="title">Web Development</h3>
                </div>
            </div>
        </div>
    </div>
</div>      
    
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));
        }
    });
}); 




问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!