Js间断/连续的文字滚动代码
-
Js文字滚动代码,可设置间断滚动和连续滚动。滚动时是向上滚动的,控制Li列表滚动,兼容性表现地不错,兼容IE/火狐、Opera等浏览器,代码如下:
01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
02
<
html
>
03
<
head
>
04
<
title
>文字间隔滚动代码-兼容IE和FireFox</
title
>
05
<
style
type
=
"text/css"
>
06
<!--
07
body {
08
text-align:center;
09
}
10
ul{
11
margin:0px;
12
padding:0px;
13
list-style:none;
14
}
15
#andyscroll {
16
overflow: hidden;
17
background: #E8F8F8;
18
padding: 0 10px;
19
text-align: left;
20
400px;
21
height:100px;
22
overflow:hidden;
23
}
24
#andyscroll a {
25
font:12px/18px tahoma;
26
color: #000;
27
float:left;
28
100%;
29
text-decoration: none;
30
display:block;
31
}
32
#andyscroll a:hover {
33
font:12px/18px tahoma;
34
color: #F60;
35
}
36
-->
37
</
style
>
38
</
head
>
39
<
body
>
40
<
div
id
=
"andyscroll"
>
41
<
div
id
=
"scrollmessage"
>
42
<
UL
>
43
<
li
><
a
href
=
"#"
>完全兼容IE, FF, Opera, 文字间断滚动测试……</
a
></
li
>
44
<
li
><
a
href
=
"#"
>完全兼容IE, FF, Opera, 文字间断滚动测试……</
a
></
li
>
45
<
li
><
a
href
=
"#"
>完全兼容IE, FF, Opera, 文字间断滚动测试……</
a
></
li
>
46
<
li
><
a
href
=
"#"
>完全兼容IE, FF, Opera, 文字间断滚动测试……</
a
></
li
>
47
<
li
><
a
href
=
"#"
>完全兼容IE, FF, Opera, 其它的还未经测试……</
a
></
li
>
48
<
li
><
a
href
=
"#"
>完全兼容IE, FF, Opera, 文字间断滚动测试……</
a
></
li
>
49
<
li
><
a
href
=
"#"
>完全兼容IE, FF, Opera, 其它的还未经测试……</
a
></
li
>
50
<
li
><
a
href
=
"#"
>完全兼容IE, FF, Opera, 文字间断滚动测试……</
a
></
li
>
51
<
ul
>
52
</
div
>
53
</
div
>
54
<
script
type
=
"text/javascript"
>
55
var stopscroll = false;
56
var scrollElem = document.getElementById("andyscroll");
57
var marqueesHeight = scrollElem.style.height;
58
scrollElem.onmouseover = new Function('stopscroll = true');
59
scrollElem.onmouseout = new Function('stopscroll = false');
60
var preTop = 0;
61
var currentTop = 0;
62
var stoptime = 0;
63
var leftElem = document.getElementById("scrollmessage");
64
scrollElem.appendChild(leftElem.cloneNode(true));
65
init_srolltext();
66
function init_srolltext(){
67
scrollElem.scrollTop = 0;
68
setInterval('scrollUp()', 35);//确定滚动速度的, 数值越小, 速度越快
69
}
70
function scrollUp(){
71
if(stopscroll) return;
72
currentTop += 1; //设为1, 可以实现间歇式的滚动; 设为2, 则是连续滚动
73
if(currentTop == 19) {
74
stoptime += 1;
75
currentTop -= 1;
76
if(stoptime == 180) {
77
currentTop = 0;
78
stoptime = 0;
79
}
80
}else{
81
preTop = scrollElem.scrollTop;
82
scrollElem.scrollTop += 1;
83
if(preTop == scrollElem.scrollTop){
84
scrollElem.scrollTop = 0;
85
scrollElem.scrollTop += 1;
86
}
87
}
88
}
89
</
script
>
90
</
body
>
91
</
html
>