json数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
.outer{
position:relative;
width:100px;
height:32px;
margin:20px auto;
background:#f1ab44;
overflow:hidden;
}
.list{
position:absolute;
top:0;
width:32px;
background:#000;
color:#fff;
text-align:center;
}
.list li{
height:32px;
line-height:32px;
font-size:26px;
}
.list1{
left:0;
}
.list2{
left:34px;
}
.list3{
right:0;
}
.cc{
height:1000px;
}
</style>
</head>
<body>
<div class="cc"></div>
<div class="outer">
<ul class="list list1">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ul class="list list2">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ul class="list list3">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="cc"></div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function(){
move();
function move(){
var clientH = $(window).height(),
$scroll = $(window).scrollTop(),
$height = $(".outer").height(),
$off = $(".outer").offset().top;
if ($off + $height - $scroll >$height && $off + $height - $scroll <= clientH) {
$.post("test1.json",function(data){
var flag=32,data1=data.data,ary=data1.split("");
if(ary.length == 1){
ary.unshift("0","0");
}else if(ary.length == 2){
ary.unshift("0");
}
var ary1=Number(ary[0]),ary2=Number(ary[1]),ary3=Number(ary[2]);
/* $(".list1").animate({top:-ary1*flag+"px"},ary1*200);
$(".list2").delay(ary1*500).animate({top:-ary2*flag+"px"},ary2*200);
$(".list3").delay(ary2*500).animate({top:-ary3*flag+"px"},ary3*200);*/
$(".list1").animate({top:-ary1*flag+"px"},500);
$(".list2").delay(500).animate({top:-ary2*flag+"px"},500);
$(".list3").delay(800).animate({top:-ary3*flag+"px"},500);
$("body").css("background","red")
});
}else{
$(".list").each(function(){
$(this).stop(5000).css("top",0)
});
$("body").css("background","green");
}
}
$(window).scroll(function () {
move()
});
});
</script>
</html>
