javaScript实现滚动新闻的方法
本文实例讲述了javaScript实现滚动新闻的方法。分享给大家供大家参考。具体如下：
rolling_new.html页面如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>NewDocument</title>
<metaname="Generator"content="EditPlus">
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Author"content="">
<metaname="Keywords"content="">
<metaname="Description"content="">
</head>
<styletype="text/css">
*{margin:0;padding:0;}
#news{display:none;}
</style>
<body>
<divid="news">
太平天国医疗卫生组织，在国家制度上，有一定的组织，已经形成为一
种正规化的制度。它可分为朝内、军中、居民三个系统。
种正规化的制度。它可分为朝内、军中、居民三个系统。
种正规化的制度。它可分为朝内、军中、居民三个系统。
种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。
</div>
<divid="show_news">
</div>
</body>
<scripttype="text/javascript">
function$(node){
returndocument.getElementById(node);
}
functiongetElementsByClassName(str,root,tag){
if(root){
root=typeofroot=="string"?document.getElementById(root):root;
}else{
root=document.body;
}
tag=tag||"*";
varels=root.getElementsByTagName(tag),arr=[];
for(vari=0,n=els.length;i<n;i++){
for(varj=0,k=els[i].className.split(""),l=k.length;j<1;j++){
if(k[j]==str){
arr.push(els[i]);
break;
}
}
}
returnarr;
}
functionattachEvent(node,eventType,handler){
node=typeofnode=="string"?document.getElementById(node):node;
if(document.all){
node.attachEvent("on"+eventType,handler);
}else{
node.addEventListener(eventType,handler,false);
}
}
functionrolling_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(){
varo=this;
vartarget=o.target;
varcontent=o.source_content;
varinnerDiv=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(){
varx=this;
vardivHeight=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(){
varj=this;
vardivHeight=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(){
varp=this;
varnewDiv=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(){
vard=this;
varnewDiv=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(){
vart=this;
switch(t.direction){
//向上
case"up":
t.up();
break;
//向右
case"down":
t.down();
break;
}
},
autoplay:function(){
vars=this;
s.auto=setInterval(function(){s.play()},1);
},
stop:function(){
varh=this;
clearInterval(h.auto);
}
}
vara=newrolling_news("news","show_news",200,200,1,"down");
a.initialize();
</script>
</html>
希望本文所述对大家的javascript程序设计有所帮助。