<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<meta name="Author" content="haley">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<title>跑秒显示效果</title>
<style>
.num{
color:green;
font-weight: bold;
border:1px solid #f00;
height: 80px;
line-height: 80px;;
font-size: 50px;
width: 14%;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div style="position: fixed;top:100px;100%;">
<div class="num num1">15</div>
<div class="num num2">34</div>
<div class="num num3">25</div>
<div class="num num4">32</div>
</div>
<div style="height:2000px;"></div>
<script>
var numbers=[460,260,100,245];
var cons=[
{"name":$('.num1'),"n":numbers[0]},
{"name":$('.num2'),"n":numbers[1]},
{"name":$('.num3'),"n":numbers[2]},
{"name":$('.num4'),"n":numbers[3]}
];
var timer=null;
var second=2000;
function setHtml(){
$.each(cons,function(i){
cons[i].name.html(cons[i].n);
});
}
$.fn.extend({
'runSecond': function () {
var elem = $(this);
var h = elem.html()/1;
var a = 0;
timer = setInterval(function () {
if (a <= h) {
elem.html(a++);
} else {
// clearInterval(timer);
timer = null;
}
}, second / h);
console.log(h);
}
});
(function ($) {
setHtml();
var a= 1,arr=[];
arr[0]=$('body').scrollTop();
$(window).scroll(function(){
arr[1]=$('body').scrollTop();
console.log(arr[0]);
console.log(arr[1]);
if(arr[0]<arr[1]){
console.log('向下滚动');
arr[0]=arr[1];
}else{
console.log('向上滚动');
arr[0]=arr[1];
}
if($('body').scrollTop()>100&&a%2){
a++;
$.each(cons, function (j) {
$(cons[j].name).runSecond();
});
}
if($('body').scrollTop()<20){
a=1;
}
});
})(jQuery);
</script>
</body>
</html>
haley欢迎您来访本博客。此博客是作者在工作中的一个记事本，方便下次遇到同样问题时，以最快的速度解决掉遇到的问题。如果您发现哪里写的不对，欢迎给我留言，让我们一起进步。不胜感激！