效果类似:(抱歉,图片是静态的)
写一段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.οnmοuseοver=function(){p=true}o.οnmοuseοut=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){}