1:The standard marquee
<marquee>Detail here</marquee>
Such as: <marquee direction=left behavior=alternate>direction, behavior</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:
Code
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
<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
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>
<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>
10
var t=setInterval(myfunc,1000)
11var d=document.getElementById("div1")
12
function 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
<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>10
var t=setInterval(myfunc,1000)11
var d=document.getElementById("div1")12
function myfunc(){
13
var o=d.firstChild14
d.removeChild(o)15
d.appendChild(o)16
}17
d.onmouseover=function(){clearInterval(t)}18
d.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>
<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">14
marqueesHeight=200;15
stopscroll=false;16
17
with(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
}26
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');27
28
preTop=0; currentTop=0; 29
30
function 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
}38
document.body.onload=init;39
40
function 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
<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