javaScript实现滚动新闻的方法

2019-11-20 11:57:23

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：百度地图API之本地搜索与范围搜索

下一篇：javascript中递归函数用法注意点