用两个div嵌套链接文字,最外面的div设置overflow:hidden,并用js动态控制它的width,实现伸展与收缩。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>新闻轮显的demo</title>
<styletype="text/css">
a{font-size:14px}
#box{width:400px;height:20px;overflow:hidden;}
#title{color:#000;width:400px;height:20px;font-size:14px;line-height:18px;/*background-color:#FF0000*/}
</style>
<scripttype="text/javascript">
varhandle;
varhandle2;
varboxW=0;
vartitleNum=0;
functioninit(){
varnewsTitles="快乐笛子的博客|中央统战部:新社会阶层纳入中国统一战线|中俄明年将在俄远东地区举行联合反恐演|广州宾馆3小时内须将旅客信息传给公安机关|国亲将推动弹劾陈水扁案";
varnewsLinks="http://www.happyshow.org|http://news.sina.com.cn/c/2006-09-02/093410901015.shtml|http://news.sina.com.cn/c/2006-09-02/02069914065s.shtml|http://news.sina.com.cn/c/2006-09-02/043210898986.shtml|http://news.sina.com.cn/c/2006-09-02/06069915455s.shtml";
document.getElementById("box").style.width="400px";
document.getElementById("title").innerHTML="<atarget='_blank'href='"+newsLinks.split("|")[titleNum]+"'>"+newsTitles.split("|")[titleNum]+"</a>";
//setTimeout("decreaseBoxW();",1500);
titleNum++;
setInterval("innerTitle('"+newsTitles+"','"+newsLinks+"')",3100);
}
functioninnerTitle(titles,links){
vart=titles.split("|");
vara=links.split("|");
if(!t[titleNum])
titleNum=0;
document.getElementById("box").style.width="0px";
document.getElementById("title").innerHTML="<atarget='_blank'href='"+a[titleNum]+"'>"+t[titleNum]+"</a>";
handle2=setInterval("increaseBoxW()",1);//展开
titleNum++;
}
functionincreaseBoxW(){
boxW=parseInt(document.getElementById("box").style.width);
boxW=boxW+4;
if(boxW>400){
clearInterval(handle2);
document.getElementById("box").style.width="400px";
setTimeout("decreaseBoxW()",1500)
}else{
document.getElementById("box").style.width=boxW+"px";
}
}
functiondecreaseBoxW(){
handle=setInterval("decreaseBoxW2()",4)
}
functiondecreaseBoxW2(){
boxW=parseInt(document.getElementById("box").style.width);
boxW=boxW-16;
if(boxW<0){
clearInterval(handle);
document.getElementById("box").style.width="0px";
}else{
document.getElementById("box").style.width=boxW+"px";
}
}
</script>
</head>
<body>
<divid="box">
<divid="title"></div>
</div>
<scripttype="text/javascript">
init();
</script>
</body>
</html>