知识 分享 互助 懒人建站

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

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

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

    作者:速博娱乐是什么 来源: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://sbylssm.985sunbet.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-最新评论

    网站地图 菲律宾环球娱乐 大佬娱乐官方网站 大玩家备用网址
    澳门银河赌场登入 申博99sunbet 申博sunbet备用网 申博在线太阳
    彩票平台驴彩官网登入 大唐彩票的网址登入 永利娱乐会所开户登入 丹阳棋牌游戏中心
    菲彩国际线上博彩 凱旋门娱乐场 英皇国际在线娱乐 中原娱乐bc2013
    新世纪娱乐最新网址 菲彩国际线上博彩 博狗开户 皇城国际官方网站
    768XTD.COM 8ZZS.COM 618XTD.COM XSB598.COM 8YQS.COM
    XSB438.COM 378PT.COM DC785.COM 756SUN.COM 519tt.com
    134sun.com 697SUN.COM 768XTD.COM XSB868.COM 818XTD.COM
    S618H.COM 179SUN.COM 195PT.COM 585sj.com 968tt.com