封装一个滚动到指定位置实现数字递加效果的方法

封装一个滚动到指定位置实现数字递加效果的方法

<script src="http://www.zzwtqx.com/index/js/jquery-1.4.2.min.js"></script>

<div style="margin-top:2000px;background:#ccc"></div>

<p><span id="num1">0</span>+</p>

<p><span id="num2">0</span>+</p>
<div style="margin-top:2000px;background:#ccc"></div>

<script>
  //stap为每次加的步伐
  //istart为起始值
  // iover为结束值
  // id为显示位置
  //domTop为要滚动到的dom节点的位置
  function NumberTo(stap, istart, iover, id, domTop) {
    $(window).scroll(function () {
      var topp = $(document).scrollTop();
      var domTopp = $(domTop).offset().top
      if (topp > (domTopp - $(window).height() + 100)) {
        //上面判断滚动条到达domTopp时候开始执行
        for (var j = 0; j <= 1; j++) {
          var int = setInterval(function () {
            $(id).html(istart);
            // console.log(istart)
            if (istart < iover) {
              istart = istart + stap;
            } else {
              istart = iover;
              return false
              clearInterval(int);
            }
          }, 1);
        }
      }
    })
  }//封装结束
  NumberTo(1, 300, 10000, '#num1', "#num1");
  NumberTo(10, 300, 100000, '#num2', "#num1");
</script>


//判断多次滚
<script>
if( $(".index-4 .list").offset().top < ($(window).scrollTop() + window.innerHeight) && ($(".index-4 .list").offset().top +  $(".index-4 .list").height()) > $(window).scrollTop() ){
	if( !numberScrollOn )
		return;
		numberScrollOn = false;
			NumberTo()
}else{
	numberScrollOn = true;
}
</script>

//或者用下面这种

var easing = {
    quadratic: function (x){
      return Math.sqrt(x);
    }
};

function range(start, stop, step){
  var array = [];
  for(var i = start; i < stop; i += step) array.push(i);
  return array;
}

function interpolation(fps, easing, finalValue){
  function scaleIt(value){return finalValue * value; }

  var x = range(0, 1, 1/fps),
      y = x.map(easing).map(scaleIt);

  return y;
}

function animateEl(values, duration, onAnimate){
  var frameIndex = 0,
      fps = values.length,
      id = setInterval(anime, duration/fps );

  function anime(){
    var current = values[frameIndex],
        isLastFrame = (frameIndex === fps - 1);

    onAnimate(current, frameIndex, values);

    if(isLastFrame){
      clearInterval(id);
    }else{
      frameIndex++;
    }
  }
}

function round(value, decimals) {
  return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
}

function unformat(content){
  var unlocalized = content.replace('.', '').replace(',', '.'),
      value = parseFloat(unlocalized);
  return value;
}

function format(value){
  return value.toString().replace('.', ',');
}
var numberOn = true;
function numberStart(){
	if( !numberOn )
		return;
	numberOn = false;
	setTimeout(function(){
		numberOn = true;
	},1500)
    var fps = 60,
        els = [].slice.call(document.querySelectorAll('.slowNumber'));

    els.forEach(function(el){
        var content = (el.firstChild.textContent).trim(),
            decimalPlaces = content.split(',')[1] || '',
            value = unformat(content),
            values = interpolation(fps, easing.quadratic, value);

        animateEl(values, 1000, function (current, i, values){
          var isLast = (i === values.length - 1),
              value = round(current, decimalPlaces.length);
          el.firstChild.textContent = isLast? content : format(value);
        });
    });
}

//调用方法
 var numberScrollOn = true;
        $(window).scroll(function(event) {
          if( $(".section_4 .table").offset().top < ($(window).scrollTop() + window.innerHeight) && ($(".section_4 .table").offset().top +  $(".section_4 .table").height()) > $(window).scrollTop() ){
            if( !numberScrollOn )
              return;
            numberScrollOn = false;
            numberStart()
          }else{
            numberScrollOn = true;
          }
        });