出处：http://news.newhua.com/news1/programming/2008/49/0849102011991363504GE04I3F373D40FAKH58KF23GD1F3A92IIHB3.html
来源：中国自学编程网
来源：中国自学编程网
用法很简单：
var scroll = new ScrollText("content","pre","next",true);
第一个参数是滚动区的id,第二个是显示上一条的按钮的id,第三个是显示下一条的按钮的id,第四个是是否直接开始滚动，为false的话后面再scroll.Start()就OK了。
ScrollText.js
1
function ScrollText(content,btnPrevious,btnNext,autoStart)
2
{
3
this.Speed = 10;
4 this.Timeout = 1500;
5 this.LineHeight = 20;
6 this.NextButton = this.$(btnNext);
7 this.PreviousButton = this.$(btnPrevious);
8 this.ScrollContent = this.$(content);
9 this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;
10 this.NextButton.onclick = this.GetFunction(this,"Next");
11 this.PreviousButton.onclick = this.GetFunction(this,"Previous");
12
13 this.NextButton.onmouseover = this.GetFunction(this,"Stop");
14 this.NextButton.onmouseout = this.GetFunction(this,"Start");
15
16 this.ScrollContent.onmouseover = this.GetFunction(this,"Stop");
17 this.ScrollContent.onmouseout = this.GetFunction(this,"Start");
18
19 this.PreviousButton.onmouseover = this.GetFunction(this,"Stop");
20 this.PreviousButton.onmouseout = this.GetFunction(this,"Start");
21 if(autoStart)
22
{
23 this.Start();
24
}
25
}
26
27ScrollText.prototype.$ = function(element)
28{
29 return document.getElementById(element);
30}
31
32ScrollText.prototype.Previous = function()
33{
34 clearTimeout(this.AutoScrollTimer);
35 clearTimeout(this.ScrollTimer);
36 this.Scroll("up");
37}
38
39ScrollText.prototype.Next = function()
40{
41 clearTimeout(this.AutoScrollTimer);
42 clearTimeout(this.ScrollTimer);
43 this.Scroll("down");
44}
45ScrollText.prototype.Start = function()
46{
47 this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
48
49}
50ScrollText.prototype.Stop = function()
51{
52 clearTimeout(this.AutoScrollTimer);
53}
54ScrollText.prototype.AutoScroll = function()
55{
56 this.ScrollContent.scrollTop++;
57 if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
58 {
59 this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Speed);
60 }
61 else
62 {
63 if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
64 {
65 this.ScrollContent.scrollTop = 0;
66 }
67 this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
68 }
69}
70ScrollText.prototype.Scroll = function(direction)
71{
72 if(direction=="up")
73 {
74 this.ScrollContent.scrollTop--;
75 }
76 else
77 {
78 this.ScrollContent.scrollTop++;
79 }
80 if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
81 {
82 this.ScrollContent.scrollTop = 0;
83 }
84 if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
85 {
86 this.ScrollTimer = setTimeout(this.GetFunction(this,"Scroll",direction), this.Speed);
87 }
88}
89ScrollText.prototype.GetFunction = function(variable,method,param)
90{
91 return function()
92 {
93 variable[method](param);
94 }
95}
function ScrollText(content,btnPrevious,btnNext,autoStart)2
{
3
this.Speed = 10;4
this.Timeout = 1500;5
this.LineHeight = 20;6
this.NextButton = this.$(btnNext);7
this.PreviousButton = this.$(btnPrevious);8
this.ScrollContent = this.$(content);9
this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;10
this.NextButton.onclick = this.GetFunction(this,"Next");11
this.PreviousButton.onclick = this.GetFunction(this,"Previous");12
13
this.NextButton.onmouseover = this.GetFunction(this,"Stop");14
this.NextButton.onmouseout = this.GetFunction(this,"Start");15
16
this.ScrollContent.onmouseover = this.GetFunction(this,"Stop");17
this.ScrollContent.onmouseout = this.GetFunction(this,"Start");18
19
this.PreviousButton.onmouseover = this.GetFunction(this,"Stop");20
this.PreviousButton.onmouseout = this.GetFunction(this,"Start");21
if(autoStart)22
{
23
this.Start();24
}25
}26
27
ScrollText.prototype.$ = function(element)28
{29
return document.getElementById(element);30
}31
32
ScrollText.prototype.Previous = function()33
{34
clearTimeout(this.AutoScrollTimer);35
clearTimeout(this.ScrollTimer);36
this.Scroll("up");37
}38
39
ScrollText.prototype.Next = function()40
{41
clearTimeout(this.AutoScrollTimer);42
clearTimeout(this.ScrollTimer);43
this.Scroll("down");44
}45
ScrollText.prototype.Start = function()46
{47
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);48
49
}50
ScrollText.prototype.Stop = function()51
{52
clearTimeout(this.AutoScrollTimer);53
}54
ScrollText.prototype.AutoScroll = function()55
{56
this.ScrollContent.scrollTop++;57
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)58
{59
this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Speed);60
}61
else62
{63
if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)64
{65
this.ScrollContent.scrollTop = 0;66
}67
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);68
}69
}70
ScrollText.prototype.Scroll = function(direction)71
{72
if(direction=="up")73
{74
this.ScrollContent.scrollTop--;75
}76
else77
{78
this.ScrollContent.scrollTop++;79
}80
if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)81
{82
this.ScrollContent.scrollTop = 0;83
}84
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)85
{86
this.ScrollTimer = setTimeout(this.GetFunction(this,"Scroll",direction), this.Speed);87
}88
}89
ScrollText.prototype.GetFunction = function(variable,method,param)90
{91
return function()92
{93
variable[method](param);94
}95
}
Demo.Htm
1<html xmlns="http://www.w3.org/1999/xhtml" >
2
3<head>
4 <title>Untitled Page</title>
5 <script language="javascript" type="text/javascript" src="ScrollText.js"></script>
6</head>
7<body>
8<div id="pre" style="width:20px;height:20px;float:left;text-align:center;background-color:#EEEEEE;border:solid 1px #888888;">↑</div>
9<div id="content" style="height:20px;line-height:20px;overflow:hidden;float:left;width:120px;border:solid 1px #0000FF;">
10hello1
..<br>
11hello2..<br>
12hello3..<br>
13hello4..<br>
14hello5..<br>
15hello6..<br>
16hello7..<br>
17hello8..<br>
18</div>
19<div id="next" style="width:20px;height:20px;float:left;text-align:center;background-color:#EEEEEE;border:solid 1px #888888;">↓</div>
20<script language="javascript" type="text/javascript">
21var scroll = new ScrollText("content","pre","next",true);
22</script>
23</body>
24</html>
<html xmlns="http://www.w3.org/1999/xhtml" >2
3
<head>4
<title>Untitled Page</title>5
<script language="javascript" type="text/javascript" src="ScrollText.js"></script>6
</head>7
<body>8
<div id="pre" style="width:20px;height:20px;float:left;text-align:center;background-color:#EEEEEE;border:solid 1px #888888;">↑</div>9
<div id="content" style="height:20px;line-height:20px;overflow:hidden;float:left;width:120px;border:solid 1px #0000FF;">10
hello1..<br>11
hello2..<br>12
hello3..<br>13
hello4..<br>14
hello5..<br>15
hello6..<br>16
hello7..<br>17
hello8..<br>18
</div>19
<div id="next" style="width:20px;height:20px;float:left;text-align:center;background-color:#EEEEEE;border:solid 1px #888888;">↓</div>20
<script language="javascript" type="text/javascript">21
var scroll = new ScrollText("content","pre","next",true);22
</script>23
</body>24
</html>
浙公网安备 33010602011771号