{

    "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. Eclipse更改颜色主题

    通过在线安装的方式 Help -> Install New Software Work with: 输入 http://eclipse-color-theme.github.com/update ...

  2. 批量插入Oracle，遇到CLob字段慢的解决办法

    在一次执行批量插入到Oracle表,其他一个字段设置为CLOB,但没有内容,在插入时,在代码指定为CLOB类型,插入相当慢,后来改为VarChar2,速度就上去了,经测试,插入一个65535个字符,没 ...

  3. 如何在不接入微信API的情况下自定义分享内容（图片、链接、标题）

    方法如下: 1.设置分享title:动态改变document.title值即可: document.title = 'test' 2.设置分享图片:在页面隐藏一张尺寸大于290*290的图(图片需要容 ...

  4. Golang教程：Map

    什么是 map? Map 是 Go 中的内置类型,它将键与值绑定到一起.可以通过键获取相应的值. 如何创建 map? 可以通过将键和值的类型传递给内置函数 make 来创建一个 map.语法为:mak ...

  5. angularjs之UI Grid 的刷新 本地数据源及HTTP数据源

    关键代码: 如果数据源是本地数据$("#hidJsonData").val("[]");   var myJsonData = [];   if ($(&quo ...

  6. sql server存储过程中SELECT 与 SET 对变量赋值的区别 转自Theo

    SQL Server 中对已经定义的变量赋值的方式用两种,分别是 SET 和 SELECT. 对于这两种方式的区别,SQL Server 联机丛书中已经有详细的说明,但很多时候我们 并没有注意,其实这 ...

  7. 快速了解RabbitMQ消息队列

    MQ 是什么?队列是什么,MQ 我们可以理解为消息队列,队列我们可以理解为管道.以管道的方式做消息传递. 场景: 1.其实我们在双11的时候,当我们凌晨大量的秒杀和抢购商品,然后去结算的时候,就会发现 ...

  8. Java温故而知新（2）多线程详解

    多线程指的是在单个程序中可以同时运行多个同的线程执行不同的任务.线程是程序内的顺序控制流,只能使用分配给序的资源和环境.     一.线程与进程的区别 多个进程的内部数据和状态都是完全独立的,而多线程 ...

  9. JavaScript--3种函数调用的方法

    1.函数的简单调用: <script > function fn(p){ alert(p); } </script> <body><script> fn ...

  10. 《深入理解Java内存模型》读书总结（转-总结很好）

    概要 文章是<深入理解Java内容模型>读书笔记,该书总共包括了3部分的知识. 第1部分,基本概念 包括“并发.同步.主内存.本地内存.重排序.内存屏障.happens before规则. ...