about marquee

1:The standard marquee
<marquee>Detail here</marquee>
Such as: <marquee direction=left behavior=alternate>direction, behavior</marquee>

also: the parameters can be: scrollamount=25,scrolldelay=1000, bgcolor=pink,width=200,height=200 and so on...
advanced:

1 < marquee  height ="400"  direction ="up"  width ="500"  bgcolor ="#3366cc" >
2 < marquee  height ="50"  direction ="left"  width ="100%" >
3 < font  style ="font-size: 35px; color:#fff" > MARQUEE </ font >
4 </ marquee >
5 </ marquee >
6

Code
<table>
<tr>
<td bgcolor=#cc3300 width=468>
<marquee direction="down" behavior="alternate" scrollamount=1 height="60">
 <marquee direction="right" behavior="alternate" scrollamount=4 width="468">
    我被墙撞回@_@!
  </marquee>
</marquee>
</td>
</tr>
</table>

 1 < table  bgcolor ="#EFEFEF" >
 2   < tr >< td  width ="1"  valign ="top"   >
 3      < marquee  direction ="down"  behavior ="alternate"  scrollamount =1  height ="60" >
 4      < marquee  direction ="right"  scrollamount =4  behavior ="alternate"  width ="468" >
 5     ≮『 12345上山做和尚 』≯ 
 6      </ marquee >
 7      </ marquee >
 8     </ td >
 9    < td  width ="468" >  
10     < marquee  direction ="up"  behavior ="alternate"  scrollamount =1  height ="60" >
11     < marquee  direction ="left"  scrollamount =4  behavior ="alternate"  width ="468" >
12    原来可以嵌套    </ marquee >
13     </ marquee >
14 </ td ></ tr ></ table >

2:Most time we have more than one news

First:scroll one by one

 1 < style > a{}{display:block;font-size:15px}; </ style >
 2 < div  id ="div1"  style ="width:300px;height:68px;overflow:hidden" >
 3 < a  href ="javascript:" > 1,hi，boy </ a >
 4 < a  href ="javascript:" > 2,hi, girl </ a >
 5 < a  href ="javascript:" > 3,hi, money </ a >
 6 < a  href ="javascript:" > 4,hi, ninainaide </ a >
 7 < a  href ="javascript:" > 5,hi, I'm so black </ a >
 8 </ div >  
 9 < script >
10var t=setInterval(myfunc,1000)
11var d=document.getElementById("div1")
12function myfunc(){
13var o=d.firstChild
14d.removeChild(o)
15d.appendChild(o)
16}
17d.onmouseover=function(){clearInterval(t)}
18d.onmouseout=function(){t=setInterval(myfunc,1000)}
19 </ script >
20
21
22

Second: It's more "和谐" than the one above

 1 < div  id ="marquees"  width ="200px" >
 2     < font  style ="" >
 3     < a  href ="#" > news one </ a >< br >
 4     < br >
 5     < a  href ="#" > news two </ a >< br >
 6     < br >
 7     < a  href ="#" > news three </ a >< br >
 8     < br >
 9     < a  href ="#" > news four11111111111111111111111111111122222222222222222222222222222 </ a >< br >
10     < br >
11 </ div >  
12
13 < script  language ="JavaScript" >
14marqueesHeight=200;
15stopscroll=false;
16
17with(marquees){
18   style.width=0;
19   style.height=marqueesHeight;
20   style.overflowX="visible";
21   style.overflowY="hidden";
22   noWrap=true;
23   onmouseover=new Function("stopscroll=true");
24   onmouseout=new Function("stopscroll=false");
25}
26document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
27
28preTop=0; currentTop=0; 
29
30function init(){
31   templayer.innerHTML="";
32   while(templayer.offsetHeight<marqueesHeight){
33     templayer.innerHTML+=marquees.innerHTML;
34   }
35   marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
36   setInterval("scrollUp()",30);
37}
38document.body.onload=init;
39
40function scrollUp(){
41   if(stopscroll==true) return;
42   preTop=marquees.scrollTop;
43   marquees.scrollTop+=1;
44   if(preTop==marquees.scrollTop){
45     marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
46     marquees.scrollTop+=1;
47   }
48}
49 </ script >

Third: It is almost like the second one

 1 < body  leftmargin ="0"  topmargin ="2"  marginheight ="0"  marginwidth ="0" >
 2      < center >
 3          < h1 >
 4             JS不间断循环滚动 </ h1 >
 5          < table  style ="border-right: #666666 1px solid; border-top: #666666 1px solid; border-left: #666666 1px solid;
 6             border-bottom: #666666 1px solid"  cellspacing ="0"  cellpadding ="0"  width ="750"
 7             align ="center"  border ="0" >
 8              < tbody >
 9                  < tr >
10                      < td  width ="30" >
11                          < a  href ="#"  onclick ="clickdiv()"  id ="aa" > 向左 </ a >
12                      </ td >
13                      < td >
14                          < div  id ="demo"  style ="overflow: hidden; width: 750px; color: #ffffff" >
15                              < table  cellspacing ="0"  cellpadding ="0"  align ="left"  border ="0"  cellspace ="0" >
16                                  < tbody >
17                                      < tr >
18                                          < td  id ="demo1"  valign ="top" >
19                                              < table  width ="1710"  height ="116"  border ="0"  cellpadding ="0"  cellspacing ="0" >
20                                                  < tr >
21                                                      < td  width ="171"  background ="pic_bg.jpg" >
22                                                          < div  align ="center" >
23                                                             内容一 </ div >
24                                                      </ td >
25                                                      < td  width ="171"  background ="pic_bg.jpg" >
26                                                          < div  align ="center" >
27                                                             内容二 </ div >
28                                                      </ td >
29                                                      < td  width ="171"  background ="pic_bg.jpg" >
30                                                          < div  align ="center" >
31                                                             内容三 </ div >
32                                                      </ td >
33                                                      < td  width ="171"  background ="pic_bg.jpg" >
34                                                          < div  align ="center" >
35                                                             内容四 </ div >
36                                                      </ td >
37                                                      < td  width ="171"  background ="pic_bg.jpg" >
38                                                          < div  align ="center" >
39                                                             内容五 </ div >
40                                                      </ td >
41                                                  </ tr >
42                                              </ table >
43                                          </ td >
44                                          < td  id ="demo2"  valign ="top" >
45                                          </ td >
46                                      </ tr >
47                                  </ tbody >
48                              </ table >
49                          </ div >
50                      </ td >
51                      < td  width ="30" >
52                          < a  href ="#"  onclick ="Rclickdiv()"  id ="mcc" > 向右 </ a >
53                      </ td >
54                  </ tr >
55              </ tbody >
56          </ table >
57          </ TD ></ TR ></ TABLE >
58      </ center >
59
60      < script >  
61var speed3=25//速度数值越大速度越慢 
62var t=false; 
63var id="aa"; 
64document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML 
65function Marquee(){ 
66if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0) 
67document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth 
68else{ 
69document.getElementById("demo").scrollLeft++ 
70} 
71t=false; 
72} 
73function RMarquee(){
74if(document.getElementById("demo").scrollLeft<=0) 
75  document.getElementById("demo").scrollLeft+=document.getElementById("demo2").offsetWidth 
76  else{ 
77  document.getElementById("demo").scrollLeft-- 
78  } 
79  t=true;
80}
81function clickdiv(){ 
82clearInterval(MyMar) 
83Marquee(); 
84} 
85function Rclickdiv(){ 
86clearInterval(MyMar) 
87RMarquee(); 
88} 
89var MyMar=setInterval(Marquee,speed3) 
90document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)} 
91document.getElementById("demo").onmouseout=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}} 
92document.getElementById('mcc').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);} 
93document.getElementById('aa').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);} 
94     </ script >
95
96 </ body >
97

That's all, I think it will be easy to understand with the code

转载于:https://www.cnblogs.com/whoseyourlady/archive/2009/08/16/1547732.html