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>
  • 相关阅读:
    url的非法字符有哪些
    asp.net各种获取客户端ip方法
    可编辑表格
    菜单弹出隐藏
    淡入淡出窗口
    使用XML传递数据
    Intellij IDEA将工程打包成jar包并执行
    使用JavaScript实现ajax
    AJAX基本演示使用
    统计指定目录下的视频时长
  • 原文地址:https://www.cnblogs.com/davidhhuan/p/1964295.html
Copyright © 2011-2022 走看看