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

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

2024-09-04 04:39:28   224人阅读

<!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:800px;
        }
    </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>
    </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>
    </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>
    </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 - $scroll > 0 && $off - $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");
                }else if(ary.length == 3){}
                console.log(ary);
                var ary1=Number(ary[0]),ary2=Number(ary[1]),ary3=Number(ary[2]);
                $(".list1").animate({"top":-ary1*flag},ary1*500);
                $(".list2").animate({"top":-ary2*flag},ary2*500);
                $(".list3").animate({"top":-ary3*flag},ary3*500);
            })
        }
    }
    $(window).scroll(function () {
        move()
    });

})
</script>
</html>
技术分享 
{
    "data": "328"
}
json数据

 

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


联系
我们