标签：
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 |
width:400px; |
21 |
height:100px; |
22 |
overflow:hidden; |
23 |
} |
24 |
#andyscroll a { |
25 |
font:12px/18px tahoma; |
26 |
color: #000; |
27 |
float:left; |
28 |
width: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> |
标签：
原文地址：http://www.cnblogs.com/lizonghai/p/4639779.html
