javaScript实现滚动新闻的方法

这篇文章主要介绍了javaScript实现滚动新闻的方法,涉及javascript实现页面滚动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了javaScript实现滚动新闻的方法。分享给大家供大家参考。具体如下：

rolling_new.html页面如下：

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
2. "http://www.w3.org/TR/html4/loose.dtd"> 
3. <html> 
4. <head> 
5. <title> New Document </title> 
6. <meta name="Generator" content="EditPlus"> 
7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
8. <meta name="Author" content=""> 
9. <meta name="Keywords" content=""> 
10. <meta name="Description" content=""> 
11. </head> 
12. <style type="text/css"> 
13. *{margin:0;padding:0;} 
14. #news{display:none;} 
15. </style> 
16. <body> 
17. <div id="news"> 
18. 太平天国医疗卫生组织，在国家制度上，有一定的组织，已经形成为一 
19. 种正规化的制度。它可分为朝内、军中、居民三个系统。 
20. 种正规化的制度。它可分为朝内、军中、居民三个系统。 
21. 种正规化的制度。它可分为朝内、军中、居民三个系统。 
22. 种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。 
23. </div> 
24. <div id="show_news"> 
25. </div> 
26. </body> 
27. <script type="text/javascript"> 
28. function $(node){ 
29. return document.getElementById(node); 
30. } 
31. function getElementsByClassName(str,root,tag){ 
32. if(root){ 
33. root=typeof root=="string"?document.getElementById(root):root; 
34. }else{ 
35. root=document.body; 
36. } 
37. tag=tag||"*"; 
38. var els=root.getElementsByTagName(tag),arr=[]; 
39. for(var i=0,n=els.length;i<n;i++){ 
40. for(var j=0,k=els[i].className.split(" "),l=k.length;j<1;j++){ 
41. if(k[j]==str){ 
42. arr.push(els[i]); 
43. break; 
44. } 
45. } 
46. } 
47. return arr; 
48. } 
49. function attachEvent(node,eventType,handler){ 
50. node=typeof node=="string"?document.getElementById(node):node; 
51. if(document.all){ 
52. node.attachEvent("on"+eventType,handler); 
53. }else{ 
54. node.addEventListener(eventType,handler,false); 
55. } 
56. } 
57. function rolling_news(source,target,width,height,speed,direction){ 
58. this.source=$(source); 
59. this.source_content=$(source).innerHTML; 
60. this.target=$(target); 
61. this.width=width; //宽 
62. this.height=height; //高 
63. this.speed=speed; //滚动速度 
64. this.direction=direction;//方向 
65. this.tag=0;  
66. } 
67. rolling_news.prototype={ 
68. version:"1.00", 
69. author:"yangfeifei", 
70. date:"2011-10-23", 
71. initialize:function(){ 
72. var o=this; 
73. var target=o.target; 
74. var content=o.source_content; 
75. var innerDiv=document.createElement("div"); 
76. innerDiv.setAttribute("class","innerDiv"); 
77. o.source.innerHTML=""; 
78. innerDiv.innerHTML=o.source_content; 
79. target.appendChild(innerDiv);  
80. //显示区域样式 
81. target.style.width=o.width+"px"; 
82. target.style.height=o.height+"px"; 
83. target.style.overflow="hidden"; 
84. target.getElementsByTagName('div')[0].style.width=o.width+"px"; 
85. target.getElementsByTagName('div')[0].style.height=target.getElementsByTagName('div')[0].scrollHeight>o.height?target.getElementsByTagName('div')[0].scrollHeight+"px":o.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度 
86. //显示区域初始化 
87. switch(o.direction){ 
88. case "up": 
89. target.scrollTop="0"; 
90. o.addAfterNode(); 
91. break; 
92. case "down": 
93. o.addBeforeNode(); 
94. target.scrollTop=target.scrollHeight-o.height; 
95. break; 
96. }  
97. //初始动作  
98. o.autoplay(); 
99. attachEvent(o.target,'mouseover',function(){o.stop()}); 
100. attachEvent(o.target,'mouseout',function(){o.autoplay()}); 
101. }, 
102. up:function(){ 
103. var x=this; 
104. var divHeight=x.target.getElementsByTagName('div')[0].scrollHeight>x.height?x.target.getElementsByTagName('div')[0].scrollHeight:x.height; 
105. if((x.target.scrollHeight-x.target.scrollTop)!=x.height){ 
106. x.target.scrollTop=x.tag; 
107. }else{ 
108. x.addAfterNode(); 
109. x.target.removeChild(x.target.getElementsByTagName('div')[0]);  
110. x.tag=x.tag-divHeight; 
111. x.target.scrollTop=x.tag;  
112. } 
113. x.tag=x.tag+x.speed; 
114. }, 
115. down:function(){ 
116. var j=this; 
117. var divHeight=j.target.getElementsByTagName('div')[0].scrollHeight>j.height?j.target.getElementsByTagName('div')[0].scrollHeight:j.height; 
118. if(j.target.scrollTop==0){ 
119. j.addBeforeNode(); 
120. j.target.removeChild(j.target.getElementsByTagName('div')[2]);  
121. j.tag=j.tag-divHeight; 
122. j.target.scrollTop=j.target.scrollHeight-j.height-j.tag; 
123. }else{ 
124. j.target.scrollTop=j.target.scrollHeight-j.height-j.tag; 
125. } 
126. j.tag=j.tag+j.speed; 
127. }, 
128. addAfterNode:function(){ 
129. var p=this; 
130. var newDiv=document.createElement('div'); 
131. newDiv.setAttribute("class","innerDiv"); 
132. newDiv.innerHTML=p.source_content; 
133. p.target.appendChild(newDiv); 
134. newDiv.style.width=p.width+"px"; 
135. newDiv.style.height=p.target.getElementsByTagName('div')[0].scrollHeight>p.height?p.target.getElementsByTagName('div')[0].scrollHeight+"px":p.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度 
136. }, 
137. addBeforeNode:function(){ 
138. var d=this; 
139. var newDiv=document.createElement('div'); 
140. newDiv.setAttribute("class","innerDiv"); 
141. newDiv.innerHTML=d.source_content; 
142. d.target.insertBefore(newDiv,d.target.getElementsByTagName('div')[0]); 
143. newDiv.style.width=d.width+"px"; 
144. newDiv.style.height=d.target.getElementsByTagName('div')[0].scrollHeight>d.height?d.target.getElementsByTagName('div')[0].scrollHeight+"px":d.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度 
145. }, 
146. play:function(){ 
147. var t=this;  
148. switch(t.direction){ 
149. //向上 
150. case "up": 
151. t.up(); 
152. break; 
153. //向右 
154. case "down":  
155. t.down(); 
156. break;  
157. }  
158. }, 
159. autoplay:function(){ 
160. var s=this; 
161. s.auto=setInterval(function(){s.play()},1); 
162. }, 
163. stop:function(){ 
164. var h=this; 
165. clearInterval(h.auto); 
166. } 
167. } 
168. var a=new rolling_news("news","show_news",200,200,1,"down"); 
169. a.initialize(); 
170. </script> 
171. </html> 

希望本文所述对大家的javascript程序设计有所帮助。