With two div nested link text, the most outer div set Overflow:hidden, and JS dynamic control of its width, to achieve stretching and contraction.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> News Wheel Demo</title>
<style type= "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>
<script type= "Text/javascript" >
var handle;
var handle2;
var boxw=0;
var titlenum=0;
function init () {
var newstitles = "Happy Bamboo Flute Blog | Central front: New social stratum into China united Front" | Russia will hold joint anti-terrorism in the Far East next year | Guangzhou Hotel must pass the passenger information to the public security organ in 3 hours | The National Pro will promote the impeachment of Chen Shui-bian case ";
var newslinks = "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 = "<a target= ' _blank ' href= '" +newslinks.split ("|") [titlenum]+ ' > ' +newstitles.split ("|") [titlenum]+ "</a>";
SetTimeout ("Decreaseboxw ();", 1500);
titlenum++;
SetInterval ("Innertitle" (' +newstitles+ ", '" +newslinks+ ")", 3100);
}
function Innertitle (titles,links) {
var t = titles.split ("|");
var a = Links.split ("|");
if (!t[titlenum])
titlenum=0;
document.getElementById ("box"). Style.width = "0px";
document.getElementById ("title"). InnerHTML = "<a target= ' _blank ' href= '" +a[titlenum]+ "' > ' +t[titlenum]+ ' </ A> ";
Handle2 = SetInterval ("Increaseboxw ()", 1);/unfold
titlenum++;
}
function Increaseboxw () {
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";
}
}
function Decreaseboxw () {
Handle = SetInterval ("decreaseBoxW2 ()", 4)
}
function decreaseBoxW2 () {
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>
<body>
<div id= "box" >
<div id= "title" ></div>
</div>
<script type= "Text/javascript" >
Init ();
</script>
</body>
