页面滚动到可视区事件

js部分

//历史事记出现在可视区事件
var isAct = true;
var itemHeight,vh,yh;
$(window).scroll(function(){
itemHeight = parseInt($(".historyUl").outerHeight(true));//内容区域的高度
vh = parseInt($(window).height());//浏览器可视区域的高度
yh = parseInt($(window).scrollTop());//偏移量
if(!(yh>($(".historyUl").offset().top + itemHeight)||yh < ($(".historyUl").offset().top - vh))){
console.log(1)
var list = $(".historyUl li b");
if(isAct){
list.each(function(i){
show(i)
})
}
isAct = false;
}else{
console.log(2)
isAct = true;
var list = $(".historyUl li b");
list.each(function(i){
$(".historyUl li b").eq(i).find("label").text("0")
})
}
})
var show = function(i){
var count = 0;
var account = $(".historyUl li b").eq(i).attr("data-value") - 0;
setInterval(function(){
if(count<account && account<1000){
count ++;
$(".historyUl li b").eq(i).find("label").text(count)
}else if(count<account && account>=1000){
count += 100;
$(".historyUl li b").eq(i).find("label").text(count)
}
},20)
}

 

html部分

<div class="history">
<div class="titleDemo">
<h2>历史事记</h2>
<span class="titleDemoP1 titleDemoP">HISTORICAL STORIES</span>
<div class="titleDemoLine"></div>
</div>
<ul class="historyUl">
<li class="historyLi">
<b data-value="12"><label>12</label>+</b>
<div class="historyTip">大数据行业成长</div>
</li>
<li class="historyLi">
<b data-value="20"><label>20</label>+</b>
<div class="historyTip">国家科研专利认证</div>
</li>
<li class="historyLi">
<b data-value="2000"><label>2000</label>+</b>
<div class="historyTip">品牌合作</div>
</li>
<li class="historyLi">
<b data-value="18000"><label>18000</label>+</b>
<div class="historyTip">服务项目</div>
</li>
</ul>
<div class="cl"></div>
<div class="historyDes">历经十二年积淀，以实战洗炼技术，用成就论证伟大</div>
<a href="history.html" class="historyA">更多</a>
</div>

 

效果链接 http://www.topengroup.com/html/views/index.html