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:

<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 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

<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.firstChild
14

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

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

<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

marqueesHeight=200;
15

stopscroll=false;
16

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

preTop=0; currentTop=0;
29

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

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

<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

<script>
61

var speed3=25//速度数值越大速度越慢
62

var t=false;
63

var id="aa";
64

document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
65

function Marquee(){
66

if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
67

document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
68

else{
69

document.getElementById("demo").scrollLeft++
70

}
71

t=false;
72

}
73

function RMarquee(){
74

if(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

}
81

function clickdiv(){
82

clearInterval(MyMar)
83

Marquee();
84

}
85

function Rclickdiv(){
86

clearInterval(MyMar)
87

RMarquee();
88

}
89

var MyMar=setInterval(Marquee,speed3)
90

document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
91

document.getElementById("demo").onmouseout=function() {if(t){MyMar=setInterval(RMarquee,speed3)}else{MyMar=setInterval(Marquee,speed3)}}
92

document.getElementById('mcc').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(RMarquee,speed3);}
93

document.getElementById('aa').onmouseout=function(){clearInterval(MyMar);MyMar=setInterval(Marquee,speed3);}
94

</script>
95

</body>
97

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

posted on 2009-08-16 22:53 eEhdsa 阅读(353) 评论(0) 收藏举报

刷新页面返回顶部

eEhdsa

about marquee

导航

公告