javaScript实现滚动新闻的方法

本文实例讲述了javaScript实现滚动新闻的方法。分享给大家供大家参考。具体如下：
rolling_new.html页面如下：
<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <style type="text/css"> *{margin:0;padding:0;} #news{display:none;} </style> <body> <div id="news"> 太平天国医疗卫生组织，在国家制度上，有一定的组织，已经形成为一种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。 </div> <div id="show_news"> </div> </body> <script type="text/javascript"> function $（node）{return document.getElementById（node）; } function getElementsByClassName（str,root,tag）{ if（root）{root=typeof root=="string"?document.getElementById（root）:root; }else{root=document.body; } tag=tag||"*"; var els=root.getElementsByTagName（tag）,arr=[]; for（var i=0,n=els.length;i<n;i++）{for（var j=0,k=els[i].className.split（" "）,l=k.length;j<1;j++）{ if（k[j]==str）{arr.push（els[i]）;break; }} } return arr; } function attachEvent（node,eventType,handler）{node=typeof node=="string"?document.getElementById（node）:node;if（document.all）{ node.attachEvent（"on"+eventType,handler）;}else{ node.addEventListener（eventType,handler,false）;} } function rolling_news（source,target,width,height,speed,direction）{this.source=$（source）;this.source_content=$（source）.innerHTML;this.target=$（target）;this.width=width;//宽this.height=height;//高this.speed=speed;//滚动速度this.direction=direction;//方向this.tag=0; } rolling_news.prototype={version:"1.00",author:"yangfeifei",date:"2011-10-23",initialize:function（）{ var o=this; var target=o.target; var content=o.source_content; var innerDiv=document.createElement（"div"）; innerDiv.setAttribute（"class","innerDiv"）; o.source.innerHTML=""; innerDiv.innerHTML=o.source_content; target.appendChild（innerDiv）; //显示区域样式 target.style.width=o.width+"px"; target.style.height=o.height+"px"; target.style.overflow="hidden"; target.getElementsByTagName（"div"）[0].style.width=o.width+"px"; target.getElementsByTagName（"div"）[0].style.height=target.getElementsByTagName（"div"）[0].scrollHeight>o.height?target.getElementsByTagName（"div"）[0].scrollHeight+"px":o.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度 //显示区域初始化 switch（o.direction）{case "up":target.scrollTop="0";o.addAfterNode（）;break;case "down":o.addBeforeNode（）;target.scrollTop=target.scrollHeight-o.height;break; }//初始动作 o.autoplay（）; attachEvent（o.target,"mouseover",function（）{o.stop（）}）; attachEvent（o.target,"mouseout",function（）{o.autoplay（）}）;},up:function（）{ var x=this; var divHeight=x.target.getElementsByTagName（"div"）[0].scrollHeight>x.height?x.target.getElementsByTagName（"div"）[0].scrollHeight:x.height; if（（x.target.scrollHeight-x.target.scrollTop）！=x.height）{ x.target.scrollTop=x.tag; }else{x.addAfterNode（）;x.target.removeChild（x.target.getElementsByTagName（"div"）[0]）;x.tag=x.tag-divHeight;x.target.scrollTop=x.tag;} x.tag=x.tag+x.speed;},down:function（）{ var j=this; var divHeight=j.target.getElementsByTagName（"div"）[0].scrollHeight>j.height?j.target.getElementsByTagName（"div"）[0].scrollHeight:j.height; if（j.target.scrollTop==0）{j.addBeforeNode（）;j.target.removeChild（j.target.getElementsByTagName（"div"）[2]）; j.tag=j.tag-divHeight;j.target.scrollTop=j.target.scrollHeight-j.height-j.tag; }else{j.target.scrollTop=j.target.scrollHeight-j.height-j.tag; } j.tag=j.tag+j.speed;},addAfterNode:function（）{ var p=this; var newDiv=document.createElement（"div"）; newDiv.setAttribute（"class","innerDiv"）; newDiv.innerHTML=p.source_content; p.target.appendChild（newDiv）; newDiv.style.width=p.width+"px"; newDiv.style.height=p.target.getElementsByTagName（"div"）[0].scrollHeight>p.height?p.target.getElementsByTagName（"div"）[0].scrollHeight+"px":p.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度},addBeforeNode:function（）{ var d=this; var newDiv=document.createElement（"div"）; newDiv.setAttribute（"class","innerDiv"）; newDiv.innerHTML=d.source_content; d.target.insertBefore（newDiv,d.target.getElementsByTagName（"div"）[0]）; newDiv.style.width=d.width+"px"; newDiv.style.height=d.target.getElementsByTagName（"div"）[0].scrollHeight>d.height?d.target.getElementsByTagName（"div"）[0].scrollHeight+"px":d.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度},play:function（）{ var t=this;switch（t.direction）{//向上case "up": t.up（）; break;//向右case "down":t.down（）; break;} },autoplay:function（）{ var s=this; s.auto=setInterval（function（）{s.play（）},1）;},stop:function（）{ var h=this; clearInterval（h.auto）;} } var a=new rolling_news（"news","show_news",200,200,1,"down"）; a.initialize（）; </script></html>
希望本文所述对大家的javascript程序设计有所帮助。