知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    jq数字动画插件-jquery.animateNumber.js

    作者:bbin视讯真人娱乐平台登入 来源:web前端开发 2016-09-05 人气:
    jq数字动画插件-jquery.animateNumber.js,可以实现数字的动画显示效果,比如从1跑到36500,从1%跑到100%类似这样的效果,数字动画效果控制多样,非常不错。

    jq数字动画插件-jquery.animateNumber.js,可以实现数字的动画显示效果,比如从1跑到36500,从1%跑到100%类似这样的效果,数字动画效果控制多样,非常不错。
    jquery.color.min.js并不是必须的,您可以删除,Example 3演示了使用jquery.color.min.js来达到数字由红到绿的变色

    引入js文件:
    <script type='text/javascript' src='http://bbinsxzrylptdr.xsb868.com/libs/jquery/jquery-1.7.0.min.js'></script>
    <script src="jquery.color.min.js"></script> 
    <script src="jquery.animateNumber.js"></script>

    下面是jquery.animateNumber调用演示说明

    Example 1: 基础动画效果

    <p>This plugin only <span id="lines">0</span> lines of code.</p>
    
        $('#lines').animateNumber({ number: 165 });
    

    This plugin only 0 lines of code.

    Example 2: 数字间显示分隔符

    <p>World population is <span id="world-population">0</span>.</p>
    
        var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
        $('#world-population').animateNumber(
        {
        number: 7095217980,
        numberStep: comma_separator_number_step
        }
        );
    

    World population is 0.

    Example 3: 使用多个属性控制动画

    <p>Fun level <span id="fun-level" style="color: red;">0 %</span>.</p>
    
        var percent_number_step = $.animateNumber.numberStepFactories.append(' %')
        $('#fun-level').animateNumber(
        {
        number: 100,
        color: 'green',
        'font-size': '30px',
    
        easing: 'easeInQuad',
    
        numberStep: percent_number_step
        },
        15000
        );
    

    Fun level 0 %.

    Example 4: 自定义数字步阶处理方法(句柄)

    <p>Points per pixel <span id="points">0</span>.</p>
    
        $('#points').animateNumber(
        {
        number: 72,
        numberStep: function(now, tween) {
        var target = $(tween.elem);
    
        target
        .prop('number', now) // keep current prop value
        .text(now);
        },
        'slow'
        }
        );
    

    Points per pixel 0.

    Example 5: 定义动画数字的开始数据,下面实例定义的是从10到100数据的变化

    <p id="ten">From ten to hundred.</p>
    
        $('#ten')
        .prop('number', 10)
        .animateNumber(
        {
        number: 100
        },
        20000
        );
    

    From ten to hundred.

    Example 6: 带小数位

    <p id="decimals">From $0,00 to $5,00</p>
    
        // how many decimal places allows
        var decimal_places = 2;
        var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);
    
        $('#decimals')
        .animateNumber(
        {
        number: 5 * decimal_factor,
    
        numberStep: function(now, tween) {
        var floored_number = Math.floor(now) / decimal_factor,
        target = $(tween.elem);
    
        if (decimal_places > 0) {
        // force decimal places even if they are 0
        floored_number = floored_number.toFixed(decimal_places);
    
        // replace '.' separator with ','
        floored_number = floored_number.toString().replace('.', ',');
        }
    
        target.text('$' + floored_number);
        }
        },
        20000
        );
    

    From $0,00 to $5,00

    Example 7: 倒计时,以下代码为从10倒数到0

    <p id="revese-countdown">10</p>
    
        $('#revese-countdown')
        .prop('number', 10)
        .animateNumber(
        {
        number: 0,
        numberStep: function(now, tween) {
        var target = $(tween.elem),
        rounded_now = Math.round(now);
    
        target.text(now === tween.end ? 'Launch!' : rounded_now);
        }
        },
        10000,
        'linear'
        );
    
    

    10

    Example 8: 动画以后回调

    <p id="countdown">10</p>
    
        $('#countdown')
        .animateNumber(
        {
        number: 10
        },
        'normal',
        function() {
        $('#countdown').text('Countdown completed!')
        }
        );
    
    

    0

    Example 9: 选中复选框动画

    <p>
        <label><input type="checkbox" id="checkbox"> use max power</label>
        <br>
        Power: <span id="power">10</span>%
        </p>
    
        <script type="text/javascript">
        var numberStep = function(now, tween) {
        var target = $(tween.elem),
        rounded_now = Math.round(now);
    
        target.prop('number', rounded_now).text(rounded_now);
        };
    
        var use_max_power = $('#checkbox');
        use_max_power.click(function(){
        if ( use_max_power.is(':checked') ) {
        $('#power').stop().animateNumber({
        number: 100,
        numberStep: numberStep
        }, 5000);
        }
        else {
        $('#power').stop().animateNumber({
        number: 10,
        numberStep: numberStep
        }, 5000);
        }
        });
        </script>
    

     
    Power: 10%

    Example 10: 从占位符0到有数字的动画

    <p>
        Signatures gathered: <span id="signatures">000000</span>
        <br>
        <button id="start-campaign">Start campaign</button>
        </p>
    
        <script type="text/javascript">
        var max_number = 100000;
    
        var padding_zeros = '';
        for(var i = 0, l = max_number.toString().length; i < l; i++) {
        padding_zeros += '0';
        }
    
        var padded_now, numberStep = function(now, tween) {
        var target = $(tween.elem),
        rounded_now = Math.round(now);
    
        var rounded_now_string = rounded_now.toString()
        padded_now = padding_zeros + rounded_now_string;
        padded_now = padded_now.substring(rounded_now_string.length);
    
        target.prop('number', rounded_now).text(padded_now);
        };
    
        var use_max_power = $('#checkbox');
        $('#start-campaign').click(function(){
        $('#signatures').animateNumber({
        number: max_number,
        numberStep: numberStep
        }, 5000);
        });
        </script>
    

    Signatures gathered: 000000 

    ↓ 查看全文

    jq数字动画插件-jquery.animateNumber.js由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    jq数字动画插件-jquery.animateNumber.js-最新评论

    网站地图 bbin视讯域名注册登入 BBIN馆官网现金网登入 ag视讯游戏网站登入
    大玩家娱乐平台 菲律宾申博官方网站 申博最高可占几成 菲律宾申博信誉最好
    彩票828app下载登入 五星彩票网官网登入 ag网址导航 趣赢娱乐平台登入
    BBIN馆官网现金网登入 ag视讯网址登入 ag视讯充值中心登入 AG亚太集团登入
    bbin视讯国际登入 ag视讯平台注册登入 bbin视讯手机版下载登入 ag旗舰厅直营网登入
    2888DZ.COM 1112125.COM 8NTS.COM 99sbsg.com 062xx.com
    XSB9999.COM 568XTD.COM 517XTD.COM 844TGP.COM 726SUN.COM
    889XTD.COM 188TGP.COM 987XTD.COM 978DC.COM 99sbsun.com
    115sj.com 316sun.com 985sunbet.com 697XTD.COM 9888DZ.COM