Method 1: Because marquee has been abandoned by W3C standards, JS Code is the only way to implement the rolling effect under the standard.
HTML code <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><Body>
<H4> rolling news </H4>
<Script language = "JavaScript" type = "text/JavaScript">
VaR marqueecontent = new array ();
Marqueecontent [0] = "<a href = http://xyq.163.com/news/2006/11/2-2-20061102170913.html target = _ blank> use" fantastic secret protection "to quickly retrieve the account password </a> ";
Marqueecontent [1] = "<a href = http://ekey.163.com/target = _ blank> Netease General Orders official website </a> ";
Marqueecontent [2] = "<a href = http://xyq.163.com/download/wallpaper.htm target = _ blank> latest wallpaper download </a> ";
Marqueecontent [3] = "<a href = http://xyq.163.com/download/around.htm target = _ blank> latest screensaver download </a> ";
VaR marqueeinterval = new array ();
VaR marqueeid = 0;
VaR marqueedelay = 2000;
VaR marqueeheight = 20;
Function initmarquee (){
VaR STR = marqueecontent [0];
Document. write ('<Div id = "marqueebox" style = "overflow: hidden; width: 250px; Height:' + marqueeheight + 'px" onmouseover = "clearinterval (marqueeinterval [0]) "onmouseout =" marqueeinterval [0] = setinterval (\ 'startmarquee () \ ', marqueedelay) "> <div> '+ STR +' </div> ');
Marqueeid ++;
Marqueeinterval [0] = setinterval ("startmarquee ()", marqueedelay );
}
Function startmarquee (){
VaR STR = marqueecontent [marqueeid];
Marqueeid ++;
If (marqueeid> = marqueecontent. Length) marqueeid = 0;
If (document. getelementbyid ("marqueebox"). childnodes. Length = 1 ){
VaR nextline = Document. createelement ('div ');
Nextline. innerhtml = STR;
Document. getelementbyid ("marqueebox"). appendchild (nextline );
}
Else {
Document. getelementbyid ("marqueebox"). childnodes [0]. innerhtml = STR;
Document. getelementbyid ("marqueebox"). appendchild (document. getelementbyid ("marqueebox"). childnodes [0]);
Document. getelementbyid ("marqueebox"). scrolltop = 0;
}
Clearinterval (marqueeinterval [1]);
Marqueeinterval [1] = setinterval ("scrollmarquee ()", 20 );
}
Function scrollmarquee (){
Document. getelementbyid ("marqueebox"). scrolltop ++;
If (document. getelementbyid ("marqueebox"). scrolltop % marqueeheight = (marqueeHeight-1 )){
Clearinterval (marqueeinterval [1]);
}
}
Initmarquee ();
</SCRIPT>
</Body>
</Html> Method 2: This method is stronger. It can automatically scroll left and right based on the content, solving the truncation problem caused by the small width. HTML code
<HTML>
<Head>
<Title> scroll </title>
<Style type = "text/CSS">
# Infozone {font-size: 12px; color: # aa6; overflow: hidden; width: 100px; Height: 20px ;}
# Infozone Div {Height: 20px; line-Height: 20px; white-space: nowrap; overflow: hidden ;}
</Style>
<SCRIPT type = "text/JavaScript">
VaR TC;
Window. onload = function (){
VaR o = Document. getelementbyid ('infozone '); hscroll (O );
Window. setinterval (function () {window. cleartimeout (TC); O. firstchild. style. marginleft = '0px '; scrollup (O, 20, 0);}, 10000 );
}
Function scrollup (O, D, C ){
If (D = c ){
VaR T = O. firstchild. clonenode (true );
O. removechild (O. firstchild); O. appendchild (t );
T. style. margintop = O. firstchild. style. margintop = '0px ';
Hscroll (O );
}
Else {
Ch = false; var S = 3, C = C + S, L = (C> = D? C-d: 0 );
O. firstchild. style. margintop =-C + L + 'px ';
Window. setTimeout (function () {scrollup (O, D, C-l)}, 50 );
}
}
Function hscroll (o ){
VaR W1 = O. firstchild. offsetwidth, W2 = O. offsetwidth;
If (W1 <= W2) return;
TC = Window. setTimeout (function () {HS (O, w1-w2, 0, w1-w2)}, 3500 );
}
Function HS (O, D, C, p ){
C ++; var t = (C> 0? -C: C); O. firstchild. style. marginleft = T + 'px ';
If (C = d) {If (D = 0) {Tc = Window. setTimeout (function () {HS (O, P, 0, P) }, 2500);} else Tc = Window. setTimeout (function () {HS (O, 0,-P, P)}, 3500 );}
Else Tc = Window. setTimeout (function () {HS (O, D, C, p)}, 5 );
}
</SCRIPT>
</Head>
<Body>
<Div id = "infozone"> <div> Wen Lan-roof (Jay Chou Edition) </div> <div> fan Xiaoqi-those flowers </div> <div> Zhang Shaohan-doll </div> <div> sun Nan & Han Hong-beautiful myth </div> </div>
</Body>
</Html>
The third is the most streamlined, with very few code.
HTML code<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> new document </title>
<Meta name = "generator" content = "editplus">
<Meta name = "author" content = "">
<Meta name = "keywords" content = "">
<Meta name = "Description" content = "">
<Style type = "text/CSS">
# Newslist {
Background: # f7f7f7; Border: 1px solid silver; padding: 1px; Height: 20px; line-Height: 20px; width: 300px;
}
# Contain {
Font-size: 12px; overflow: hidden; List-style: none; width: 300px; Height: 20px; margin: 0px; padding: 0;
}
# Contain Li {
Height: 20px; line-Height: 20px; white-space: nowrap; overflow: hidden;
}
</Style>
</Head>
<Body>
<Div id = "newslist">
<Ul id = "contain">
<Li> <a href = "http:/www.iwcn.net"> Wen Lan-roof (left and right swing) </a> </LI>
<Li> <a href = "http:/www.iwcn.net"> fan Xiaoqi-those flowers </a> </LI>
<Li> <a href = "http:/www.iwcn.net"> Zhang Shaohan-doll </a> </LI>
<Li> <a href = "http:/www.iwcn.net"> sun Nan & Han Hong-beautiful mythology </a> </LI>
<Li> <a href = "http:/www.iwcn.net"> Zhang xinzhe-bai yueguang </a> </LI>
</Ul>
</Div>
<Script language = "JavaScript">
Function XX (){
VaR Container = Document. getelementbyid ("contain ");
Container. appendchild (container. firstchild );
}
Setinterval ("XX ()", 3000 );
</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
