zoukankan html css js c++ java

文字循环向上滚到

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

查看全文

相关阅读:
数据库事务4种隔离级别及7种传播行为
 Spring AOP深入剖析
 SQL语句-创建索引
 global文件中的application_start方法中做：定时器
 细说ASP.NET Forms身份认证
 asp.net(C#)实现功能强大的时间日期处理类完整实例
 C# 文件操作类大全
 SQL Server Profiler：使用方法和指标说明
 分库分表原则总结
 做软件与团队建设——对带研发团队和管理的总结

原文地址：https://www.cnblogs.com/donglf/p/6644277.html