{

    "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获取一个多位数，当容器显示在屏幕可视区时，让数字以滚动的形式显示的更多相关文章

  1. Winform程序以Icon的形式显示在任务栏右下角

    Form最小化是指整个Form都缩小到任务栏上,但是是以Form的标题栏形式显示的, 若是想让Form以Icon的形式显示在任务栏右下角,则需要给Form添加一个NotifyIcon控件, 在使窗体最 ...

  2. 一点关于Ajax和一个等待图标的显示

    一点关于Ajax和一个等待图标的显示 1.首先Ajax是asynchronous Java-Script and XML的简写.翻译过来就是异步的JS和XML. 2它的优点就是能不更新页面的情况下,得 ...

  3. jquery通过ajax获取数据，控制显示的数据条数

    效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...

  4. 笔记-返回到前一个页面时显示前一个页面中ajax获取的数据

    笔记第一部分:http://www.cnblogs.com/zczhangcui/p/6869219.html 在第一部分遇到的问题是,用ajax获取了一系列列表信息后,拼接好html后插入到了原有页 ...

  5. 谷歌通过ajax获取本地JSON文件，为什么会显示跨域？转载的

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...

  6. 商品类型的下拉框绑定一个事件，通过ajax获取属性

    html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...

  7. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  8. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  9. 放养的小爬虫--京东定向爬虫(AJAX获取价格数据)

    放养的小爬虫--京东定向爬虫(AJAX获取价格数据) 笔者声明:只用于学习交流,不用于其他途径.源代码已上传github.githu地址:https://github.com/Erma-Wang/Sp ...

随机推荐

  1. Tomcat与Nginx的整合

    Tomcat与Nginx的整合 环境 操作系统:ubuntu 14.04.4 LTS 安装Nginx 有两种方式,一种是使用apt-get命令来安装二进制版本,另外一种是下载源码后自己编译. 二进制安 ...

  2. bzoj 2167: 公交车站

    Description Z市交通不发达,所有公交路线覆盖的边竟然一个环也不包含,甚至该市的公交路线有可能会分为几个互不连通的块,这可真是不可思议.有一天,你突然听到一条消息,说你的M个同学被困在了Z市 ...

  3. CentOS 6.9安装docker之前升级系统内核版本

    问题描述:安装docker,官方文档要求Linux kernel至少3.8以上,且docker只能运行在64位的系统中(这个很重要,搞了个i386的系统升级了半天没成功) 升级步骤: 1.因位安装服务 ...

  4. log4j记录日志 和 webAppRootKey关系

    今天发现一个问题,就是后台从某天开始不再记录日志了,最后发现是 webAppRootKey 的 value 的值必须要和log4j的注入变量要一致. 如下:web.xml文件的 webAppRootK ...

  5. Azure 项目构建 – 部署高可用的 Python Web 应用

    Python 以其优美,清晰,简单的特性在全世界广泛流行,成为最主流的编程语言之一.Azure 平台针对 Python 提供了非常完备的支持.本项目中,您将了解如何构造和部署基于 Azure Web ...

  6. bash的常用功能呢

    一.tab键可以自动补齐命令 二.命令历史 1.history 查看之前敲过的所有命令 2.!历史命令编号 调用历史的某一个命令 三.命令别名 1.设置别名    alias 别名=‘命令’ 2.移除 ...

  7. java设计模式之装饰者模式学习

    装饰者模式 Decorator模式(别名Wrapper):动态将职责附加到对象上,若要扩展功能,装饰者提供了比继承更具弹性的代替方案. 装饰者与被装饰者拥有共同的超类,继承的目的是继承类型,而不是行为 ...

  8. Object.defineProperty使用技巧

    Object.definedProperty 该方法允许精确添加或修改对象的属性.通过赋值操作添加的普通属性是可枚举的,能够在属性枚举期间呈现出来(for...in 或 Object.keys 方法) ...

  9. docker镜像使用和总结

    一.Docker镜像是什么? 操作系统分为内核和用户空间.在Linux中,内核启动后会挂载 root 文件系统为其提供用户空间支持. docker镜像就相当于一个 root文件系统.比如:官方镜像ub ...

  10. Django 常用字段和参数

    一.ORM字段 类型 说明 AutoField 一个自动增加的整数类型字段.通常你不需要自己编写它,Django会自动帮你添加字段:`id = models.AutoField(primary_key ...