{

    "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. ExtJs6解决添加和修改Form共用一个form的隐藏域的id的取消传值

    问题重现:修改不会有问题,id会绑定之前的grid,有具体数字 添加有问题,因为id是空,传的是绑定值的话会显示“类名-1”,从int类型变成了string类型,后台会出错 这是EduQuestion ...

  2. golang的xml、json解析

    xml golang的xml处理主要应用Unmarshal.Marshal方法实现,解析一个xml到struct如下,首先是xml文件: <?xml version="1.0" ...

  3. node版本的切换（转）

    大量开发者的贡献使Node版本的迭代速度很快,版本很多(横跨0.6到0.11),所以升级Node版本就成为了一个问题.目前有n和nvm这两个工具可以对Node进行无痛升级,本文简单介绍一下二者的使用. ...

  4. smarty assign 赋值

    assign赋值 void assign (mixed var) void assign (string varname, mixed var) This is used to assign valu ...

  5. C Primer Plus note6

    error: invalid preprocessing directive #difine| 无效的宏定义处理 宏定义define 写成了 difine.

  6. radio 实现点击两次 第一次点击选中第二次点击取消

    由于项目的需求,要求radio点击两次后为取消状态,不方便修改为checkbox,可以用正面的方法实现. // jquery $('input:radio').click(function(){ // ...

  7. php获取今日开始时间和结束时间

    $begintime=date("Y-m-d H:i:s",mktime(0,0,0,date('m'),date('d'),date('Y'))); $endtime=date( ...

  8. CSS 2D转换

    转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D ...

  9. 盒模型的属性丶display显示丶浮动

    一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <me ...

  10. bootstrap-datepicker汉化

    bootstrap-datepicker 是一个非常优秀的时间选择插件,默认是英文显示日期的,通过下面几个小修改让其支持默认中文 1.首先将 bootstrap-datepicker.js 另存为 u ...