滚动触发特效

<div class="index_shuzi_bg">


    <div class="index_shuzi">
      <li>
        <dt num='2012' id="index_sz1">0</dt>
        <dd>公司成立于2012年</dd>
      </li>
      <li>
        <dt num='21' id="index_sz2">0</dt>
        <dd>21条现代化气雾剂全自动罐装线</dd>
      </li>
      <li>
        <dt num='30' id="index_sz3">0</dt>
        <dd>业务已广泛覆盖30个国家和地区</dd>
      </li>
    </div>
  </div>
 
 
  function gundong(_id) {
    let _obj = $(_id);
    let _num = parseFloat(_obj.attr('num'));

    let index = 0;
    let sudu = _num / 17.8;
    let inter = setInterval(function () {
      index += sudu;
      if (index >= _num) {
        clearInterval(inter);
        index = _num;
      }

      _obj.html(Math.ceil(index));

    }, 56)
  }


  var scroll_obj = ['.index_shop_category', '.index_pro_box', '.index_about_bg', '.index_shuzi', '.index_pro_more1', '.index_pro_more2', '.index_huanjing_bg', '.index_news_bg'];
  var index_shuzi_top = $('.index_shuzi').offset().top;
  var window_height = $(window).height();

  $(window).on('scroll', function () {
    scroll_fun();
  })
  $(
    function () {
      scroll_fun();
    }
  )


  function scroll_fun() {

    let scorll_top = $(window).scrollTop();
    let splice_arr = [];
    scroll_obj.forEach(element => {
      let element_top = $(element).eq(0).offset().top;
      if ((scorll_top + window_height) > element_top) {
        let funname = element.substr(1) + '_fun';
        if (is_function(funname)) {
          eval(funname + '()');
        } else {
          $(element).addClass('cur');
        }
        splice_arr.push(element);
      }
    }
    );
    splice_arr.forEach(element => {
      let index = scroll_obj.indexOf(element);
      scroll_obj.splice(index, 1);
    })

  }

  function is_function(functionName) {
    try {
      if (typeof eval(functionName) === "function") {
        return true;
      } else {
        return false;
      }
    } catch (e) {

    }
    return false;
  }

  var index_shuzi_fun = function () {
    gundong('#index_sz1');
    gundong('#index_sz2');
    gundong('#index_sz3');
  }

 

posted @ 2021-08-28 23:20  MasterC  阅读(31)  评论(0编辑  收藏  举报