{

    "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. C 标准库 - string.h之strcpy使用

    strcpy Copies the C string pointed by source into the array pointed by destination, including the te ...

  2. WPF实现无刷新动态切换多语言(国际化)

    1. 在WPF中国际化使用的是 .xaml文件的格式 如图:Resource Dictionary (WPF) 2. 创建默认的语言文件和其他语言文件 这里以英语为默认语言,新建一个 Resource ...

  3. <数据挖掘导论>读书笔记8FP树

    1FP树

  4. linq中where与skipwhile区别

    //字符串数组 string[] names = { "a1", "a2", "bcd","ab","bcde ...

  5. PHP学习5——异常处理

    主要内容: PHP错误类型 异常的产生 错误日志 日志信息记录到操作系统日志 异常处理 扩展异常处理类 PHP错误类型 语法错误 执行时错误 逻辑错误 异常的产生 如果安装了xampp之后,在php. ...

  6. JRebel - 给IDE安装JRebel插件

    JRebel对于很多人来说已经并不陌生了,一搜一大把. 用过JRebel后发现,这对于Java开发简直不可缺少. 尽管其价格有点春节国庆期间的各种交通费用——打劫! 即使如此也出现了有"分享 ...

  7. Ubuntu 16.04 开启BBR加速

    BBR(Bottleneck Bandwidth and RTT)是Google推出的一个提高网络利用率的算法,可以对网络进行加速,用来干什么大家心里都有B数 Ubuntu开启BBR的前提是内核版本必 ...

  8. 设计模式入门,单件模式,c++代码实现

    // test05.cpp : Defines the entry point for the console application.// #include "stdafx.h" ...

  9. Binder or AIDL的最简单实践

    1.前言: 在Android开发中多进程的合理使用+进程间通信的IPC是一个比较难的点.特别是Android特有的Binder机制,非常复杂,对于应用层开发的初级开发工程师强求深入理解Binder机制 ...

  10. servlet中cookie和session操作

    1.1 软件中的会话 一次会话: 打开浏览器 -> 访问一些服务器内容 -> 关闭浏览器 登录场景: 打开浏览器 -> 浏览到登陆页面 -> 输入用户名和密码 -> 访问 ...