• Javascript 无缝滚动


    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8">
     <title></title>
     <style type="text/css">
      
      #news{overflow:hidden; height:130px;250px;border:1px solid red;}
      ul{margin:0}
     </style>
     <script type="text/javascript">
      //需要滚动的对象
      var ul;
      var timer=null;
      var timerContinue;//继续走的一个时钟
      
      window.onload=function(){
      
       //取到ul对象
       ul=document.getElementById("news").getElementsByTagName("ul")[0];
       ul.style.marginTop="0px";
          
       //克隆一个,放到下面
       var newobj=ul.cloneNode(true);
       ul.parentNode.appendChild(newobj);
       
       go()
      
      }
      
      function go(){
       var top=parseInt(ul.style.marginTop) -5;
       
       
       //判断滚动的高度,是否超出自身的高度
       var height=ul.offsetHeight;//ul元素的高度
       if(top+height<=0){
        top=0;
       }
       
       
       ul.style.marginTop=top +"px";   
       //alert(ul.style.marginTop)
       
       timer=setTimeout(go,200);   
      }
      
      //停止
      function stop(){
       
       if(timerContinue!=null){
        clearTimeout(timerContinue);
        timerContinue=null;
       }
       
       if(timer!=null){
        clearTimeout(timer);
        timer=null;
       }
       
      }
      
      //从新开始
      function start(){
       timerContinue=setTimeout(go,1000);
      }
     </script>
    </head>
    <body>
     <br>ss
     <br>ss
     <br>ss
     <br>ss
     <div id="news" onmouseover="stop()" onmouseout="start()">
      <ul>
       <li><a href="">国内新闻。。。。。1</a></li>
       <li><a href="">国内新闻。。。。。2</a></li>
       <li><a href="">国内新闻。。。。。3</a></li>
       <li><a href="">国内新闻。。。。。4</a></li>
       <li><a href="">国内新闻。。。。。5</a></li>
       <li><a href="">国内新闻。。。。。6</a></li>
       <li><a href="">国内新闻。。。。。7</a></li>
       <li><a href="">国内新闻。。。。。8</a></li>
      </ul>
      
     </div>
     
    </body>
    </html>

    作者:Wicub
    免责声明:文章、笔记等仅供分享、探讨、参考等学习之用,因此造成的任何后果概不负责。(如有错误、疏忽等问题,欢迎指正、讨论,谢谢)
    本文版权归作者和博客园共有,欢迎转载,但请务必在文章页面明显位置给出原文连接,谢谢配合。
  • 相关阅读:
    团队冲刺第一阶段 04day
    Exception in thread "main" redis.clients.jedis.exceptions.JedisDataException: NOAUTH Authentication required.
    websocket AutoWired失败
    websocket实现后端服务端向前端实时发送消息
    websocket 404 close
    idea2019永久激活码
    @DateTimeFormat 日期转换失败
    博客园设置背景音乐(亲测有效)
    yml和properties配置在线转换
    idea导入项目项目代码不是原来代码
  • 原文地址:https://www.cnblogs.com/wicub/p/3123056.html
Copyright © 2020-2023  润新知