本文分享了如何使用JavaScript实现文字不断向上滚动的代码，适用于网页动态效果展示。
1
1、用MARQUEE实现
2
3<marquee direction=方向 loop=循环次数 behavior=滚动形式 dataformatas=文字类型 width=字符滚动窗口的宽度 height=字符滚动窗口的高度 scrolldelay=每次循环的间隔时间 scrollamount=每次移动的长度 bgcolor=滚动窗口的背景颜色 >
4
5…………要滚动的文字…………
6
7</marquee>
8
9direction：这个标记是说明所要滚动的文字是向哪个方向滚动的，它的参数有：left,right,up,down
10
11 left：文字自右向左滚动
12
13 right：文字自左向右滚动
14
15 up：文字自下向上滚动
16
17 down：文字自上向下滚动
18
19<marquee></marquee>这个标记是IE特有的，NETSCAPE是浏览不到这效果的
20
21loop：如果想让文字无限循环，则参数是"-1"；如果不是可以自行设置循环次数
22
23behavior：滚动形式，有scroll，alternate,slide等。
24 scroll:是以滚动的形式移动
25 alternate:是以来回的形式移动
26 slide:文字滚动出来后不再动
27
28dataformatas：文字类型，参数为：html,text,css等等
29
30width：你可以自行设置滚动窗口的宽度，大小是以像素为单位的，如100,150等,也可以用百分数表示，如50%
31
32height：跟width一样是控制窗口的高度，大小也是以像素为单位的
33
34scrolldelay：即是两次循环间的时间间隔，当一次循环结束后，第二次循环会在所设置的时间后出现，单位为毫秒。1秒=1000毫秒
35
36scrollamount：每次移动的长度，以像素为单位
37
38bgcolor：背景颜色，可以是16进制数，也可以是颜色名（请参看颜色表）
39
40
412。用JAVASCRIPT实现，功能强大
42
43实现文字从下往上不间断的滚动
44
45<HTML>
46<HEAD>
47</HEAD>
48<BODY>
49<DIV id=marqueey>连续滚动的字1<BR>连续滚动的字2<BR>连续滚动的字3<BR>连续滚动的字4<BR></DIV>
50
<SCRIPT language=JavaScript>
51
marqueeyHeight=140; //定义高度
52stopscroll=false;
53
with(marqueey){
54 style.width=0;
55 style.height=marqueeyHeight;
56 style.overflowX="visible";
57 style.overflowY="hidden";
58 noWrap=true;
59 onmouseover=new Function("stopscroll=true");
60 onmouseout=new Function("stopscroll=false");
61
}
62document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
63preTop=0; currentTop=0;
64function init(){
65 templayer.innerHTML="";
66 while(templayer.offsetHeight<marqueeyHeight){
67 templayer.innerHTML+=marqueey.innerHTML;
68 }
69 marqueey.innerHTML=templayer.innerHTML+templayer.innerHTML;
70 setInterval("scrollUp()",40); //滚动速度控制,越大越慢
71}
72document.body.onload=init;
73function scrollUp(){
74 if(stopscroll==true) return;
75 preTop=marqueey.scrollTop;
76 marqueey.scrollTop+=1;
77 if(preTop==marqueey.scrollTop){
78 marqueey.scrollTop=templayer.offsetHeight-marqueeyHeight;
79 marqueey.scrollTop+=1;
80 }
81
}
82</SCRIPT>
83</BODY></HTML>
84
85
1、用MARQUEE实现2
3
<marquee direction=方向 loop=循环次数 behavior=滚动形式 dataformatas=文字类型 width=字符滚动窗口的宽度 height=字符滚动窗口的高度 scrolldelay=每次循环的间隔时间 scrollamount=每次移动的长度 bgcolor=滚动窗口的背景颜色 >4
5
…………要滚动的文字…………6
7
</marquee>8
9
direction：这个标记是说明所要滚动的文字是向哪个方向滚动的，它的参数有：left,right,up,down10
11
left：文字自右向左滚动12
13
right：文字自左向右滚动14
15
up：文字自下向上滚动16
17
down：文字自上向下滚动18
19
<marquee></marquee>这个标记是IE特有的，NETSCAPE是浏览不到这效果的20
21
loop：如果想让文字无限循环，则参数是"-1"；如果不是可以自行设置循环次数22
23
behavior：滚动形式，有scroll，alternate,slide等。24
scroll:是以滚动的形式移动25
alternate:是以来回的形式移动26
slide:文字滚动出来后不再动27
28
dataformatas：文字类型，参数为：html,text,css等等29
30
width：你可以自行设置滚动窗口的宽度，大小是以像素为单位的，如100,150等,也可以用百分数表示，如50%31
32
height：跟width一样是控制窗口的高度，大小也是以像素为单位的33
34
scrolldelay：即是两次循环间的时间间隔，当一次循环结束后，第二次循环会在所设置的时间后出现，单位为毫秒。1秒=1000毫秒35
36
scrollamount：每次移动的长度，以像素为单位37
38
bgcolor：背景颜色，可以是16进制数，也可以是颜色名（请参看颜色表）39
40
41
2。用JAVASCRIPT实现，功能强大42
43
实现文字从下往上不间断的滚动44
45
<HTML>46
<HEAD>47
</HEAD>48
<BODY>49
<DIV id=marqueey>连续滚动的字1<BR>连续滚动的字2<BR>连续滚动的字3<BR>连续滚动的字4<BR></DIV>50
<SCRIPT language=JavaScript>51
marqueeyHeight=140; //定义高度52
stopscroll=false; 53
with(marqueey){54
style.width=0;55
style.height=marqueeyHeight;56
style.overflowX="visible";57
style.overflowY="hidden";58
noWrap=true;59
onmouseover=new Function("stopscroll=true");60
onmouseout=new Function("stopscroll=false");61
}62
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');63
preTop=0; currentTop=0;64
function init(){65
templayer.innerHTML="";66
while(templayer.offsetHeight<marqueeyHeight){67
templayer.innerHTML+=marqueey.innerHTML;68
}69
marqueey.innerHTML=templayer.innerHTML+templayer.innerHTML;70
setInterval("scrollUp()",40); //滚动速度控制,越大越慢71
}72
document.body.onload=init;73
function scrollUp(){74
if(stopscroll==true) return;75
preTop=marqueey.scrollTop;76
marqueey.scrollTop+=1;77
if(preTop==marqueey.scrollTop){78
marqueey.scrollTop=templayer.offsetHeight-marqueeyHeight;79
marqueey.scrollTop+=1;80
}81
}82
</SCRIPT>83
</BODY></HTML>84
85
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
