<!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:800px;
}
</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>
</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>
</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>
</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 - $scroll > 0 && $off - $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");
}else if(ary.length == 3){}
console.log(ary);
var ary1=Number(ary[0]),ary2=Number(ary[1]),ary3=Number(ary[2]);
$(".list1").animate({"top":-ary1*flag},ary1*500);
$(".list2").animate({"top":-ary2*flag},ary2*500);
$(".list3").animate({"top":-ary3*flag},ary3*500);
})
}
}
$(window).scroll(function () {
move()
});
})
</script>
</html>
{
"data": "328"
}
json数据
时间： 2024-12-22 10:41:23