javaScript實現滾動新聞的方法

2024-05-06 16:24:07

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javaScript實現滾動新聞的方法,涉及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>