zoukankan      html  css  js  c++  java
  • 滚动触发特效

    <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');
      }
    ————勇敢的少年啊 快去创造奇迹————
  • 相关阅读:
    成功的速度一定要大于父母老去的速度
    luogg_java学习_09_泛型_集合
    luogg_java学习_08_设计模式_API
    luogg_java学习_07_抽象类_接口_多态学习总结
    报表请求默认输出格式(html或者excel)设置
    XML报表开发基本过程
    rtf模板常用技巧
    xml模板提交请求submit_request
    XML基础知识
    HTML语言常用语法
  • 原文地址:https://www.cnblogs.com/masterccc/p/15201524.html
Copyright © 2011-2022 走看看