通过ajax获取一个多位数，当容器显示在屏幕可视区时，让数字以滚动的形式显示
{
"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>
通过ajax获取一个多位数，当容器显示在屏幕可视区时，让数字以滚动的形式显示的更多相关文章
- Winform程序以Icon的形式显示在任务栏右下角
Form最小化是指整个Form都缩小到任务栏上,但是是以Form的标题栏形式显示的, 若是想让Form以Icon的形式显示在任务栏右下角,则需要给Form添加一个NotifyIcon控件, 在使窗体最 ...
- 一点关于Ajax和一个等待图标的显示
一点关于Ajax和一个等待图标的显示 1.首先Ajax是asynchronous Java-Script and XML的简写.翻译过来就是异步的JS和XML. 2它的优点就是能不更新页面的情况下,得 ...
- jquery通过ajax获取数据，控制显示的数据条数
效果图: 现在我们可以先看它的json数据,如图所示: 然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...
- 笔记-返回到前一个页面时显示前一个页面中ajax获取的数据
笔记第一部分:http://www.cnblogs.com/zczhangcui/p/6869219.html 在第一部分遇到的问题是,用ajax获取了一系列列表信息后,拼接好html后插入到了原有页 ...
- 谷歌通过ajax获取本地JSON文件，为什么会显示跨域？转载的
在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...
- 商品类型的下拉框绑定一个事件，通过ajax获取属性
html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- jQuery中使用Ajax获取JSON格式数据示例代码
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...
- 放养的小爬虫--京东定向爬虫(AJAX获取价格数据)
放养的小爬虫--京东定向爬虫(AJAX获取价格数据) 笔者声明:只用于学习交流,不用于其他途径.源代码已上传github.githu地址:https://github.com/Erma-Wang/Sp ...
随机推荐
- The Add-in 'VMDebugger' failed to load or caused an exception.....的解决办法
异常如图: 解决办法: (把VS的设置导出来,做出相应修改后,再导入,问题就可以解决了) 1. 在Visual Studio中选择 Tools --> Import and Export Set ...
- Firebird with lock
Firebird 锁,默认是行级锁,即记录锁. 通常最常用的是 with lock ,即:将查出的所有记录都锁定,但允许其他事务读取,不允许其他事务更新.删除.本事务允许更新. 另一种 for upd ...
- android 生成随机数
/** * 随机数.字母 工具类 * Created by admin on 2017/2/20. */ public class RandomUntil { /** * 生成 ...
- Swift构造器链
IDE:Xcode Version7.3.1 指定构造器: 1>名字为init的方法前没有前缀(子类重写时有override除外), 2>一个类中至少有一个指定构造器,其必须初始化类中的所 ...
- 跨平台 GUI可视化 网络调试工具
mNetAssisthttp://blog.chinaunix.net/uid-21977056-id-4310527.htmlhttps://github.com/busyluo/mNetAssis ...
- spring mvc随笔
一.SpringMvc学习笔记1.使用SpringMvc时需在web.xml文件中添加配置 <servlet> <servlet-name>springMVC</serv ...
- JQ(查找)
1.由下级到上级再到下级 var aa=$("td:eq(0)").parents("tr").find("td:eq(1)"); 2.
- C#在不同平台下DLL的引用问题
缘起 很多时候,我们需要引用在不同平台下的DLL,32位(X86)和64位(X64).如果平台错误,在C#中会引发BadImageFormatException异常. 解决思路 我们同时不能添加不同平 ...
- java利用直方图实现图片对比
需求 实现两张图对比,找出其中不同的部分. 分析 首先将大图切片,分成许多小图片.然后进行逐个对比,并设定相似度阈值,判断是否是相同.最后整理,根据生成数组标记不同部分.如果切片足够小,便越能精确找出 ...
- linux sheel script demo
demo1 (输入/输出) 1.1. target : 输入姓.名, 输出姓名 1.2. create directory mkdir ~/bin 1.3. create & edit she ...