• 滚动触发特效


    <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');
      }
    ————勇敢的少年啊 快去创造奇迹————
  • 相关阅读:
    .某机构java架构师路线
    大数据计算的思想--RDD理解
    大数据组件以及岗位职业规划
    大数据技术路线图 --全图.md
    大数据技术路线图 --全图
    视频会议 lsk_lyy_share
    富文本文档git神奇-simul document
    获取当前app的版本号
    在vue中用axios设置请求拦截和响应拦截
    苹果IOS下text-shadow与box-shadow失效的解决办法
  • 原文地址:https://www.cnblogs.com/masterccc/p/15201524.html
Copyright © 2020-2023  润新知