文字循环向上滚到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开标场地情况展示</title>
    <style>
        ul,li,dl,dd{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .layout{
            text-align: center;
        }
        .list-info dl, .cycle{
             90%;
            overflow: hidden;
            margin: 0 auto;
        }
        .list-info dd{
            float: left;
            text-align: center;
            border-bottom: 1px solid #1B96EE;
            height: 40px;
            line-height: 40px;
        }
        .cycle li span{
            display: block;
            float: left;
        }
        .list-info dd:nth-child(1), .cycle li span:nth-child(1){
             17%;
        }
        .list-info dd:nth-child(2), .cycle li span:nth-child(2){
             18%;
        }
        .list-info dd:nth-child(3), .cycle li span:nth-child(3){
             25%;
        }
        .list-info dd:nth-child(4), .cycle li span:nth-child(4){
             40%;
        }
        .cycle{
            height: 195px;
        }
        .cycle ul{
             100%;
            height: 195px;
        }
        .cycle li{
            float: left;
             100%;
            height: 38px;
            line-height: 38px;
            border-bottom: 1px dashed #aaa;
        }

    </style>
</head>
<body>
<div class="layout">
    <h1>(新系统)本日开标时间安排</h1>
    <div class="list-info">
        <dl>
            <dd>时间</dd>
            <dd>开标地点</dd>
            <dd>标段编号</dd>
            <dd>项目名称</dd>
        </dl>
        <div class="cycle">
            <ul>
                <li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
                <li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
                <li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
                <li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
                <li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
                <li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
                <li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
                <li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
                <li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
                <li><span>09:00-10:00</span><span>01长沙抽纱厂</span><span>45678456786878989</span><span>该工程公司实施刷卡即可看见</span></li>
            </ul>
        </div>
    </div>
</div>

<script src="../js/common/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    function autoScroll(obj){
        $(obj).find("ul").animate({
            marginTop : "-39px"
        },500,function(){
            console.log($(this));
            $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
        })
    }
    $(function(){
        setInterval('autoScroll(".cycle")',3000);
    });

</script>
</body>
</html>
相关阅读:
golang ---cron
Maven私库安装与配置
 Java8新特性之重复注解（repeating annotations）浅析
 String split
如何将xml转为python中的字典
 json字符串和dict互转
 为什么空格拷贝到linux 会变成两个
 python之socket编程
 ntpdate设置
 Nginx配置ssl证书
原文地址：https://www.cnblogs.com/donglf/p/6644277.html