zoukankan      html  css  js  c++  java
  • 文字无缝向上滚动

    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文字无缝向上滚动</title>
    <style type="text/css">
    ul,li{margin:0;padding:0}
    #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
    #scrollDiv li{height:25px;padding-left:10px;}
    </style>
    <SCRIPT type=text/javascript src="js/jquery.js"></SCRIPT>
    
    <script type="text/javascript">
    var run;
    var scroltime=5000//间隔时间
    function AutoScroll(obj){
            $(obj).find("ul:first").animate({
                    marginTop:"-25px"
            },1000,function(){
                    $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
            });
    }
    $(document).ready(function(){
    run=setInterval('AutoScroll("#scrollDiv")',scroltime)
    $("#scrollDiv").mouseover(function(){
    clearInterval(run);       
    }); 
    $("#scrollDiv").mouseout(function(){
    run=setInterval('AutoScroll("#scrollDiv")',scroltime)      
    }); 
    });
    </script>
    </head>
    
    <body>
    <div  id="scrollDiv">
    <ul>
        <li>这是公告标题的第一行</li>
        <li>这是公告标题的第二行</li>
        <li>这是公告标题的第三行</li>
        <li>这是公告标题的第四行</li>
        <li>这是公告标题的第五行</li>
        <li>这是公告标题的第六行</li>
        <li>这是公告标题的第七行</li>
        <li>这是公告标题的第八行</li>
    </ul>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    面试题58:翻转字符串
    面试题57_2:和为S的连续正数序列
    面试题57:和为S的数字
    面试题56:数组中数字出现的次数
    面试题55_2:平衡二叉树
    面试题54:二叉搜索树的第k大节点
    面试题55_1:二叉树的深度
    tortoisegit 本地创建的分支 push github
    TortoiseGit 拉取分支
    tortoiseGIT 本地分支创建合并
  • 原文地址:https://www.cnblogs.com/webqiand/p/4609607.html
Copyright © 2011-2022 走看看