简单JS实现走马灯效果的文字(无需jQuery)

效果类似：(抱歉，图片是静态的)

写一段html，需要走马灯上下跳动的内容，但每次只显示一行：

<hr size="0" align="center" style="border-top: 1px solid #F5F5F5;"/>
<div id="marqueebox0" style="overflow: hidden; height: 26px; line-height: 26px; font-size: 14px;">
   •
   <a href="/"  target="_blank">测试第一行</a>
   <br/>
   •
   <a href="/"  target="_blank">测试第二行</a>
   <br/>
   •
   <a href="/"  target="_blank">测试第三行</a>
   <br/>
   •
   <a href="/"  target="_blank">测试第四行</a>
   <br/>
   •
   <a href="/" target="_blank">测试第五行</a>
   <br/>
</div>

 

实现走马灯效果的简单JS：

/*开始走马灯*/
function startmarquee(lh/*line-height*/,speed/*50*/,delay/*3000*/,id/*element id*/){
  var t;
  var p=false;
  var o=document.getElementById(id);
  o.innerHTML+=o.innerHTML;
  o.onmouseover=function(){p=true}
  o.onmouseout=function(){p=false}
  o.scrollTop = 0;
  function start(){
    t=setInterval(scrolling,speed);
    if(!p) o.scrollTop += 2;
  }
  function scrolling(){
    if(o.scrollTop%lh!=0){
    o.scrollTop += 2;
    if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
    }else{
    clearInterval(t);
    setTimeout(start,delay);
    }
  }
  setTimeout(start,delay);
}

/*启动效果*/
try{
startmarquee(26,50,3000,"marqueebox0");
}catch(e){}

来源：https://www.cnblogs.com/Mainz/archive/2009/09/21/1570872.html