zoukankan      html  css  js  c++  java
  • [jQuery] 最简单的字幕自动向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="data/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/css">
    #scrollDiv {
        height: 280px;
        overflow: hidden;
    }

    #scrollDiv ul li {
        border
    -bottom: 1px dotted #BBBBBB;
        margin
    -bottom: 10px;
    }
    </script>
    <script type="text/javascript">
        
    function AutoScroll(obj) {
            $(obj).find(
    "ul:first")
                .animate({
                    marginTop: 
    "-46px"
                    }, 
                    
    500
                    
    function() {
                        $(
    this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
                    }
                );
        }
        $(document).ready(
    function() {
            setInterval(
    'AutoScroll("#scrollDiv")'3000)
        });
    </script>
    </head>
        
    <div id="scrollDiv">
            
    <ul>
                
    <li>
                    测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1,测试1
                
    </li>
                
    <li>
                    测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2,测试2
                
    </li>
                
    <li>
                    测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3,测试3
                
    </li>
                
    <li>
                    测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4,测试4
                
    </li>
                
    <li>
                    测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5,测试5
                
    </li>
                
    <li>
                    测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6,测试6
                
    </li>
            
    </ul>
        
    </div>
    <body>
    </body>
    </html>
  • 相关阅读:
    BZOJ 3744 Gty的妹子序列 分块+树状数组+主席树
    BZOJ 3744 Gty的妹子序列 分块+树状数组
    51nod 1850 抽卡大赛 (十二省联考模测) DP
    BZOJ 4127: Abs (树链剖分 线段树求区间绝对值之和 带区间加法)
    BZOJ 2157: 旅游 (树链剖分+线段树)
    BZOJ 2836: 魔法树 (树链剖分+线段树)
    BZOJ 3531: [Sdoi2014]旅行 (树剖+动态开点线段树)
    树状数组彻底入门,算法小白都看得懂的超详细解析
    点双联通分量(BCC)的正确姿势
    uoj30【CF Round #278】Tourists(圆方树+树链剖分+可删除堆)
  • 原文地址:https://www.cnblogs.com/davidhhuan/p/1964295.html
Copyright © 2011-2022 走看看