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 xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>文字向上滚动</title>
    <style type="text/css">
    .box{150px; height:25px;line-height:25px; border:#bbb 1px solid; overflow:hidden;}
    .box ul{margin:0; padding:0}
    .box li{height:25px; line-height:25px; font-size:12px; text-align:center; list-style-type:none;}
    </style>
    </head>
    <body>
    <div class="box" id="marqueebox0">
    <ul>
    <li style="background:#f8e2ac;">第一行</li>
    <li style="background:#f5f5f5;">第二行</li>
    <li style="background:#ffe6ec;">第三行</li>
    </ul>
    </div>
     
    <!--<div class="box" id="marqueebox1">
    <ul>
    <li style="background:#f8e2ac;">第一行</li>
    <li style="background:#f5f5f5;">第二行</li>
    <li style="background:#ffe6ec;">第三行</li>
    </ul>
    </div> -->
    <script type="text/javascript">
    function startmarquee(lh,speed,delay,index){
    var t;
    var p=false;
    var o=document.getElementById("marqueebox"+index);
    o.innerHTML+=o.innerHTML;
    o.onmouseover=function(){p=true}
    o.onmouseout=function(){p=false}
    o.scrollTop = 0;
    function start(){
    t=setInterval(scrolling,speed);
    if(!p){ o.scrollTop += 1;}
    }
    function scrolling(){
    if(o.scrollTop%lh!=0){
    o.scrollTop += 1;
    if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
    }else{
    clearInterval(t);
    setTimeout(start,delay);
    }
    }
    setTimeout(start,delay);
    }
    startmarquee(25,30,3000,0);
    startmarquee(25,40,0,1);
    </script>
    </body>
    </html>

    注:自己转的试用了下 如果一个页面有多个需要滚动 只需要改 div的id(marqueebox) 和js中获取的id(marqueebox)就可以了;

          一行一行的滚动 把id设置(marqueebox0)不停顿滚动把id设置成(marqueebox1);本人还没有去理解代码,只是借用使用了下,如果哪位朋友借用有时间的话可以深入的了解下会更好,更有帮助

    • 第一行
    • 第二行
    • 第三行
    • 第一行
    • 第二行
    • 第三行
  • 相关阅读:
    优先内向树扩张算法 学习笔记
    BalticOI 2020 做题记录
    JOI Open 2020 做题记录
    CEOI2020做题记录
    NOI2020游记
    最长和谐子序列(力扣第594题)
    下一个更大元素系列(力扣第739题、503题)
    Trie字典树的实现(力扣第208题)
    Scala中的嵌套类
    将有序数组转换为二叉搜索树(力扣第108题)
  • 原文地址:https://www.cnblogs.com/xuxiaoshuan/p/2534739.html
Copyright © 2011-2022 走看看