跑马灯文字一行一行地向上滚动 / 学生王国

让项目列表<li>中的文字一行一行地向上滚动:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>滚动播放效果</title>
</head>
<body>
<div id="limrq" style="overflow:hidden;height:20px;line-height:22px;">
<LI>11111<A title=B2B领域战国时期&nbsp;中国行业网站走向合纵联横 
href="http://www.8tops.com/113_bqbjb_5F0F806286E74A7DB70CD90F3875B16B.htm" 
target=_blank>B2B领域战国时期 中国行业网站走向合纵联横</A></LI> 
<LI>22222<A title=网游防沉迷系统已通过审批&nbsp;预计2月推出 
href="http://www.8tops.com/113_meini_B9047FCEB6354823B45A37B40B7704A4.htm" 
target=_blank>网游防沉迷系统已通过审批 预计2月推出</A></LI>
<LI>33333<A title=整合YouTube&nbsp;Google视频搜索服务走向成熟 
href="http://www.8tops.com/113_meini_64C333DEEE7146A89E0DE6F930FC2704.htm" 
target=_blank>整合YouTube Google视频搜索服务</A></LI>
</div>
<script type="text/javascript">
var mrqInterval=new Object;
var mrqn;
var limrq=document.getElementById("limrq");
var lml=limrq.getElementsByTagName("li").length;
function liMarquee(){
	limrq.scrollTop++;
	if(limrq.scrollTop%22==0){
		clearInterval(mrqInterval[0]);
		}
	}
function nxtmrq(){
	if(mrqn<lml){
		mrqInterval[0]=window.setInterval("liMarquee()",20);
		mrqn++;
		}
	else{
		limrq.scrollTop=0;
		mrqn=0;
		nxtmrq();
		}
	}
function intimrq(){
	limrq.scrollTop=0;
	mrqn=0;
	mrqInterval[1]="";
	clearInterval(mrqInterval[1]);
	mrqInterval[1]=window.setInterval("nxtmrq()",2000);
	}
limrq.innerHTML+="<li>"+limrq.getElementsByTagName("li")[0].innerHTML+"</li>";
limrq.onmouseover=function(){
	clearInterval(mrqInterval[1]);
	}
limrq.onmouseout=function(){
	mrqInterval[1]=window.setInterval("nxtmrq()",2000);
	}
window.onload=intimrq;
</script>
</body>
</html>

关键代码分析:

overflow:hidden;隐藏超出高度20px的部分.
height:20px;容器高度.
line-height:22px;固定行高.

共2共 1 2 下一页

相关链接：
跑马灯大全(一) (2006年5月14日)
marquee标记--跑马灯用法 (2006年4月15日)