通过ajax获取一个多位数，当容器显示在屏幕可视区时，让数字以滚动的形式显示

Posted 2020-08-31 dongxiaolei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过ajax获取一个多位数，当容器显示在屏幕可视区时，让数字以滚动的形式显示相关的知识，希望对你有一定的参考价值。

{
    "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获取一个多位数，当容器显示在屏幕可视区时，让数字以滚动的形式显示的主要内容，如果未能解决你的问题，请参考以下文章

document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度

framebuffer编程提问

浏览器可视区大小简说（clientWidth,innerWidth）

Canvas可视区与虚拟画布

React实现虚拟列表