文字循环向上滚到

<!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>

相关阅读:
9-python 的ProxyHandler处理器（代理设置）
2018.2.7 css 的一些方法盒子模型
 2018.2.6 JS-判断用户浏览器
 2018.2.5 PHP如何写好一个程序用框架
 2018. 2.4 Java中集合嵌套集合的练习
 2018.2.3 Centos 的vim好看的主题配置及JDK的安装配置
 2018.2.2 java中的Date如何获取年月日时分秒
 2018.2.2 JavaScript中的封装
 2018.1.30 PHP编程之验证码
 2018.1.29 计算机二级错题汇总（二）
原文地址：https://www.cnblogs.com/donglf/p/6644277.html