文字循环向上滚到

 

<!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{
            width: 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){
            width: 17%;
        }
        .list-info dd:nth-child(2), .cycle li span:nth-child(2){
            width: 18%;
        }
        .list-info dd:nth-child(3), .cycle li span:nth-child(3){
            width: 25%;
        }
        .list-info dd:nth-child(4), .cycle li span:nth-child(4){
            width: 40%;
        }
        .cycle{
            height: 195px;
        }
        .cycle ul{
            width: 100%;
            height: 195px;
        }
        .cycle li{
            float: left;
            width: 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>

 

posted @ 2017-03-30 09:40  donglf  阅读(145)  评论(0)  编辑  收藏  举报