Home > Developer > JavaScript
Use two div nested link text, the outermost div sets overflow: hidden, and uses js to dynamically control its width to achieve stretching and shrinking.
<! 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">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> demo of news wheel display </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 flute blog | central United Front department: the new social class will be integrated into China's United Front | China and Russia will hold a joint counter-terrorism show in Russia's Far East next year | the Guangzhou hotel must transmit passenger information to the public security organs within three hours | the country will push for the impeaching of Chen shui-bian ";
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); // expand
TitleNum ++;
}
Function increaseBoxW (){
BoxW = parseInt (document. getElementById ("box"). style. width );
BoxW = boxW + 4;
If (boxW & gt; 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>
</Head>
<Body>
<Div id = "box">
<Div id = "title"> </div>
</Div>
<Script type = "text/javascript">
Init ();
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
