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 3.0 发布候选版 3 已经可用!
    NetBeans IDE 6.8 正式版发布!
    250g铜版纸 打印扑克?
    一键安装python
    京东商城副总裁李曦:大数据和电子商务_行业信息化_IT商业新闻网
    9.29的北京-》杭州的票怎么现在网上还没有可以预订呢。。。
    运动服火鸟2代三叶草运动服SWIM CLUB 1976款游泳秋装男款海马淘宝网
    无锡巨人网络科技有限公司简介20120411
    李国庆送的国旗太小了,没动力买东西
    虽然不信god,但是技术上还是算是有信yan的人吧
  • 原文地址:https://www.cnblogs.com/davidhhuan/p/1964295.html
Copyright © 2011-2022 走看看