通过ajax获取一个多位数,当容器显示在屏幕可视区时,让数字以滚动的形式显示
2024-09-03 10:57:35
{
"data": "268"
}
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>
最新文章
- find命令与cat命令区别
- 前端开发必备!Emmet语法
- Silverlight TreeView 动态绑定Xml 文件
- JDK的安装及部署配置(配图解)
- Post的请求案例
- JavaScript的语法规则
- Python正则表达式2
- rpc远程过程协议调用
- 感性体验 Android 5.0 Lollipop
- soundPool和audiofocus
- VMware 虚拟机使用RedHat,出现 connect: Network is unreachable解決方法
- [LeetCode116]Path Sum
- Shell脚本中让进程休眠的方法(sleep用法)
- 使用TcpTrace小工具截获Web Service的SOAP报文
- 手写Maven的archetype项目脚手架
- (亲测)躺着破解IDM下载权限,治疗不用破解补丁的强迫症们
- UART接口与COM口的区别
- C#中DllImport用法
- BZOJ1171 : 大sz的游戏
- linux自动启动的示例