zoukankan      html  css  js  c++  java
  • 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
    免责声明:文章、笔记等仅供分享、探讨、参考等学习之用,因此造成的任何后果概不负责。(如有错误、疏忽等问题,欢迎指正、讨论,谢谢)
    本文版权归作者和博客园共有,欢迎转载,但请务必在文章页面明显位置给出原文连接,谢谢配合。
  • 相关阅读:
    详解jQuery的$符号和init函数
    myeclipse 快捷键,从步骤开始的大括号定位到匹配方法结束的大括号
    为Jquery类和Jquery对象扩展方法
    JQuery 对象和事件
    jquery,禁止冒泡和默认行为
    什么是项目发布
    IP转换成域名
    nslookup域名查询命令查询ip
    Java中的逆变与协变
    iOS 图片背景模糊效果
  • 原文地址:https://www.cnblogs.com/wicub/p/3123056.html
Copyright © 2011-2022 走看看