JS实现文本不间断上线滚动效果【转】

其实这种js控制文本上下不间断滚动的例子不少，但是常常找的不是想要的。不是代码过于冗余就是效果不尽人意，再有就是每次用到都要去找，这也是鄙人缺乏条理性的一个显著特征。今天找到一个代码简洁，效果也不错的一个特效，所以就发上来分享加备份~
首先是css代码：

<style type="text/css"> 
	#marquee ,#marquee li { padding:0px; margin:0px;}  
	#marquee { position:relative; list-style:none; height:25px; width:210px;           padding-left:5px; overflow:hidden; border:10px solid #eee; }
	#marquee li { position:absolute; font-size:12px;}  
	#marquee a { display:block; color:#999999; text-decoration:none;}  
</style>

其次是js代码：

<script type="text/javascript"> 
  var Marquee = function(id){  
    try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};  
    var container = document.getElementById(id),  
    slide = container.getElementsByTagName("li")[0],  
    speed = arguments[1] || 80,  //速度  
    delta = 0,//当前滚动的位置  
    critical = slide.offsetHeight;//临界点  
    slide.innerHTML  = slide.innerHTML;  
    var rolling = function(){  
      delta == -critical ? delta = 0 : delta--;  
      slide.style.top = delta+"px";  
    }  
    var timer = setInterval(rolling,speed)//设置定时器  
    container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动  
    container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器  
  }  
  window.onload = function(){  
    Marquee("marquee");  
  }  
</script>

最后就要滚动的部分：

<ul id="marquee"> 
  <li> 
    <a href="#">纤云弄巧，飞星传恨，银汉迢迢暗度。</a><br /> 
    <a href="#">金风玉露一相逢，便胜却、人间无数。</a><br /> 
    <a href="#">柔情似水，佳期如梦。忍顾鹊桥归路！</a><br /> 
    <a href="#">两情若是久长时，又岂在、朝朝暮暮。</a><br /> 
    <a href="#">千重劫，百世难，亘古匆匆，弹指间！</a><br /> 
    <a href="#">不死躯，不灭魂，震古烁今，无人敌！</a><br /> 
    <a href="#">待到阴阳逆乱时，以我魔血染青天！</a><br /> 
  </li> 
</ul>