zoukankan      html  css  js  c++  java
  • js-新闻无缝滚动

    HTML部分:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312"/>
    <title>无缝滚动</title>
    </head>
    <body>
    <div id="box">
        <ul id="con1">
            <li>111111111111</li>
            <li>222222222222</li>
            <li>333333333333</li>
            <li>444444444444</li>
            <li>555555555555</li>
            <li>666666666666</li>
            <li>777777777777</li>
            <li>888888888888</li>
            <li>999999999999</li>
        </ul>
        <ul id="con2"></ul>
    </div>
    </body>
    </html>

    CSS部分:

     #box{
               height:240px;
            width:300px;
            margin:0 auto;
            border:1px solid #0066FF;
            overflow:hidden;
            padding-bottom:20px;
       }
       #box li{
               color:#333;
            padding:5px 0;
       }
        #box ul{
               margin:0;
            padding:0;
       }     

    JS部分:

    var area=document.getElementById("box");
    var con1=document.getElementById("con1");
    var con2=document.getElementById("con2");
    con2.innerHTML=con1.innerHTML;
    function scrollUp(){
        if(area.scrollTop>=con1.offsetHeight){
            area.scrollTop=0;
        }else{
            area.scrollTop++;
        }
    }
    var time=50;
    myscroll=setInterval("scrollUp()",time);
    area.onmouseover=function (){
        clearInterval(myscroll);
    }
    area.onmouseout=function (){
        myscroll=setInterval("scrollUp()",time);
    }
  • 相关阅读:
    TCP 窗口缩放、时间戳和 SACK
    对微前端的11个错误认识
    终于解决了使用Python装饰器的一个痛点
    go使用mongo
    获取鼠标当前元素
    console控制台屏蔽console
    httpx使用HTTP/2
    go解析未知结构的json
    python字典转对象
    .::Best Musica Paradisa::.
  • 原文地址:https://www.cnblogs.com/lexie/p/6688159.html
Copyright © 2011-2022 走看看