滚动触发特效
<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'); }
————勇敢的少年啊 快去创造奇迹————