Compétences efficaces en matière de défilement numérique jquery effect

Compétences efficaces en matière de défilement numérique jquery effect_javascript

WBOY

Libérer： 2016-05-16 15:25:23

original

1382 Les gens l'ont consulté

L'exemple de cet article décrit le code basé sur les effets de défilement numérique jquery. Il est divisé en quatre situations et partagé avec vous pour votre référence. Les détails sont les suivants :

Avec délimiteur et point décimal :
Uniquement les délimiteurs :
Point décimal uniquement :
Pas de délimiteur, pas de point décimal :

Opération de rendu :

Le code spécifique est le suivant

<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=="."&#63;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>

Copier après la connexion

Copiez le code et il s'exécutera.

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.