{

    "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. Maven是什么

    一.Maven是什么 Maven是一个Apache公司的开源项目,是项目构建工具.用来管理依赖. 1.Maven的好处 使用maven可以在项目中不用导入项目依赖的jar包,省去了下载和导入jar包的 ...

  2. Iterator和for...of循环

    Iterator和for...of循环 Iterator(遍历器)的概念 数据结构的默认Iterator接口 调用Iterator接口的场合 字符串的Iterator接口 Iterator接口与Gen ...

  3. easyui表单校验拓展

    /** * Created by chaozhou on 2016/5/30. */ /** * 扩展的基本校验规则, */ $.extend($.fn.validatebox.defaults.ru ...

  4. [javaEE] EL表达式调用java方法

    1.新建个类,类里面定义静态方法 package com.tsh.utils; import java.net.URLEncoder; public class ELFunc { public sta ...

  5. 六、mybatis分页插件集成

    本文基于上一篇“集成mybatis”内容 1.添加依赖 <!-- mybatis-pageHelper --> <dependency> <groupId>com. ...

  6. mysql5.7忘记密码修改方法

    mysql5.7忘记密码修改方法 mysql是开发中最常用的关系数据库之一.一般在安装数据库到时候会自定义root密码,有时候会忘记该密码,这时候需要对数据库进行密码修改. 一.windows下更改m ...

  7. asp.net 、C#实现微信企业号OAuth2认证

    以微信企业号作为入口的应用,几乎都会遇到需要应用系统中个人信息和微信用户关联问题.从而进行其他业务处理.目前所做项目采取在企业号通讯录添加自定义字段存入应用系统用户信息表中唯一标识UserGuid进行 ...

  8. pdf预览

    从服务器取回pdf流数据,通过iframe在html页面展示 不废话,,直接代码: <html> <head> <meta charset="UTF-8&quo ...

  9. 统计Redis中各种数据的大小

    如果 MySQL 数据库比较大的话,很容易就能查出是哪些表占用的空间: 不过如果 Redis 内存比较大的话, […]

  10. Hush Framework框架配置(转)

    在写这篇文章的时候,楼主已经饿的不行了,因为我从3点开始就在折腾Hush Framework,走了很多弯路,打铁要趁热,先把基本的过程记录下来,留待以后翻阅,同时记录其中容易走弯路的地方,特别是对于一 ...