zoukankan      html  css  js  c++  java
  • js-数字渐增到指定的数字,在指定的时间内完成(有动画效果哦)插件jquery.animateNumber.js

    本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好。

    但是,最终效果不理想!

    Why?

    最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个效果OUT!

    改变思路

    需求:在规定的时间内,实现数字由:初始值滚动到指定的数字

    找到一个动画插件:jquery.animateNumber.js

    html:

    <span id="bmikece" style="font-size: 35px;"><%=user.available_predeposit %></span>     //后台绑定的最终需显示的数据

    js:

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.animateNumber.js"></script>        //需引用的插件基于js

    //调用numCount()
         numCount();

    //数字递增效果
        function numCount() {
                //小数点位允许多少
                   var decimal_places = 2;
                   var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);
                   $('#bmikece')
                       .animateNumber(
                       {
                             number: (<%=user.available_predeposit %>) * decimal_factor,

                             numberStep: function(now, tween) {
                                      var floored_number = Math.floor(now) / decimal_factor,
                                            target = $(tween.elem);

                                       if (decimal_places > 0) {
                                            //强迫小数点,即使它们是0。
                                           floored_number = floored_number.toFixed(decimal_places);

                                          //用','替换'分隔符'
                                           floored_number = floored_number.toString().replace('.', '.');
                                    }
                                     target.text(floored_number);
                            }
                },2000);
    }

    最终的效果还是不错的(笑脸)

  • 相关阅读:
    VMware安装Centos7超详细过程
    Linux部署Web项目
    Entity Framework快速入门IQueryable与IEnumberable的区别
    ASP.NET MVC3中的路由系统(Routes)
    C# Lambda表达式概述
    WCF大数据量传输解决要点
    div滚动条样式设计
    ASP.NET MVC 自定义路由
    C# Lambda表达式学习笔记
    C# 操作excel
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/8949605.html
Copyright © 2011-2022 走看看