Javascript 无缝滚动

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
  
  #news{overflow:hidden; height:130px;width: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>

posted @ 2013-06-06 23:43  午时的海  阅读(162)  评论(0编辑  收藏  举报