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>
  • 相关阅读:
    1301班 github安装及账户注册
    对于软件工程课程的疑问
    LeetCode50:Pow
    LeetCode49:字母异位词分组
    LeetCode46:全排列
    LeetCode38:外观数列
    LeetCode:有效的数独
    LeetCode34:在排序数组中查找元素的第一个位置和最后一个位置
    LeetCode33:搜索旋转排序数组
    LeetCode29:两数相除
  • 原文地址:https://www.cnblogs.com/davidhhuan/p/1964295.html
Copyright © 2011-2022 走看看