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>
  • 相关阅读:
    spring事务传播机制实例讲解
    一篇关于交叉编译的文章
    Java中的泛型方法
    层序遍历打印二叉树
    寻找第K大 网易2016实习研发工程师编程题
    二叉树的非递归遍历
    二叉树 网易2016实习研发工程师编程题
    比较重量 网易2016实习研发工程师编程题
    网络地址为172.16.0.0,采用子网掩码255.255.224.0 .以下说法正确的是?
    2.7链表 回文链表
  • 原文地址:https://www.cnblogs.com/davidhhuan/p/1964295.html
Copyright © 2011-2022 走看看