高效的jquery数字滚动特效

2019-11-20 11:00:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了基于jquery数字滚动特效的代码，分为四种情况分享给大家供大家参考，具体如下：

有分隔符，有小数点：<div class="numberRun"></div> <br><br>
只有分隔符：<div class="numberRun2"></div> <br><br>
只有小数点：<div class="numberRun3"></div> <br><br>
无分隔符，无小数点：<div class="numberRun4"></div>

运行效果图：

具体代码如下

<html><head><title>数字滚动插件</title><meta charset="gb2312"><script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script><style>/*数字滚动插件的CSS可调整样式*/.mt-number-animate{ font-family: '微软雅黑'; line-height:40px; height: 40px;/*设置数字显示高度*/; font-size: 36px;/*设置数字大小*/ overflow: hidden; display: inline-block; position: relative; }.mt-number-animate .mt-number-animate-dot{ width: 15px;/*设置分割符宽度*/ line-height: 40px; float: left; text-align: center;}.mt-number-animate .mt-number-animate-dom{ width: 20px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;}.mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;}</style></head><body><br><br>有分隔符，有小数点：<div class="numberRun"></div> <br><br>只有分隔符：<div class="numberRun2"></div> <br><br>只有小数点：<div class="numberRun3"></div> <br><br>无分隔符，无小数点：<div class="numberRun4"></div> </body><script>/***  by Mantou qq:676015863*  数字滚动插件 v1.0*/;(function($) {  $.fn.numberAnimate = function(setting) {    var defaults = {      speed : 1000,//动画速度      num : "", //初始化值      iniAnimate : true, //是否要初始化动画效果      symbol : '',//默认的分割符号，千，万，千万      dot : 0 //保留几位小数点    }    //如果setting为空，就取default的值    var setting = $.extend(defaults, setting);     //如果对象有多个，提示出错    if($(this).length > 1){      alert("just only one obj!");      return;    }     //如果未设置初始化值。提示出错    if(setting.num == ""){      alert("must set a num!");      return;    }    var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">/            <span class="mt-number-animate-span">0</span>/            <span class="mt-number-animate-span">1</span>/            <span class="mt-number-animate-span">2</span>/            <span class="mt-number-animate-span">3</span>/            <span class="mt-number-animate-span">4</span>/            <span class="mt-number-animate-span">5</span>/            <span class="mt-number-animate-span">6</span>/            <span class="mt-number-animate-span">7</span>/            <span class="mt-number-animate-span">8</span>/            <span class="mt-number-animate-span">9</span>/            <span class="mt-number-animate-span">.</span>/          </div>';     //数字处理    var numToArr = function(num){      num = parseFloat(num).toFixed(setting.dot);      if(typeof(num) == 'number'){        var arrStr = num.toString().split("");        }else{        var arrStr = num.split("");      }      //console.log(arrStr);      return arrStr;    }     //设置DOM symbol:分割符号    var setNumDom = function(arrStr){      var shtml = '<div class="mt-number-animate">';      for(var i=0,len=arrStr.length; i<len; i++){        if(i != 0 && (len-i)%3 == 0 && setting.symbol != "" && arrStr[i]!="."){          shtml += '<div class="mt-number-animate-dot">'+setting.symbol+'</div>'+nHtml.replace("{{num}}",arrStr[i]);        }else{          shtml += nHtml.replace("{{num}}",arrStr[i]);        }      }      shtml += '</div>';      return shtml;    }     //执行动画    var runAnimate = function($parent){      $parent.find(".mt-number-animate-dom").each(function() {        var num = $(this).attr("data-num");        num = (num=="."?10:num);        var spanHei = $(this).height()/11; //11为元素个数        var thisTop = -num*spanHei+"px";        if(thisTop != $(this).css("top")){          if(setting.iniAnimate){            //HTML5不支持            if(!window.applicationCache){              $(this).animate({                top : thisTop              }, setting.speed);            }else{              $(this).css({                'transform':'translateY('+thisTop+')',                '-ms-transform':'translateY('+thisTop+')',   /* IE 9 */                '-moz-transform':'translateY('+thisTop+')',  /* Firefox */                '-webkit-transform':'translateY('+thisTop+')', /* Safari 和 Chrome */                '-o-transform':'translateY('+thisTop+')',                '-ms-transition':setting.speed/1000+'s',                '-moz-transition':setting.speed/1000+'s',                '-webkit-transition':setting.speed/1000+'s',                '-o-transition':setting.speed/1000+'s',                'transition':setting.speed/1000+'s'              });             }          }else{            setting.iniAnimate = true;            $(this).css({              top : thisTop            });          }        }      });    }     //初始化    var init = function($parent){      //初始化      $parent.html(setNumDom(numToArr(setting.num)));      runAnimate($parent);    };     //重置参数    this.resetData = function(num){      var newArr = numToArr(num);      var $dom = $(this).find(".mt-number-animate-dom");      if($dom.length < newArr.length){        $(this).html(setNumDom(numToArr(num)));      }else{        $dom.each(function(index, el) {          $(this).attr("data-num",newArr[index]);        });      }      runAnimate($(this));    }    //init    init($(this));    return this;  }})(jQuery); $(function(){   //初始化  var numRun = $(".numberRun").numberAnimate({num:'15343242.10', dot:2, speed:2000, symbol:","});  var nums = 15343242.10;  setInterval(function(){    nums+= 3433.24;    numRun.resetData(nums);  },3000);    var numRun2 = $(".numberRun2").numberAnimate({num:'15343242', speed:2000, symbol:","});  var nums2 = 15343242;  setInterval(function(){    nums2+= 1433;    numRun2.resetData(nums2);  },2000);    var numRun3 = $(".numberRun3").numberAnimate({num:'52353434.343', dot:3, speed:2000});  var nums3 = 52353434.343;  setInterval(function(){    nums3+= 454.521;    numRun3.resetData(nums3);  },4000);   var numRun4 = $(".numberRun4").numberAnimate({num:'52353434', speed:2000});  var nums4 = 52353434;  setInterval(function(){    nums4+= 123454;    numRun4.resetData(nums4);  },3500); });</script></html>

代码复制即可运行。

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：js倒计时简单实现方法

下一篇：JS函数的几种定义方式分析