javaScript實(shí)現(xiàn)滾動(dòng)新聞的方法
更新時(shí)間：2015年07月30日 17:13:31 作者：青銅騎士
這篇文章主要介紹了javaScript實(shí)現(xiàn)滾動(dòng)新聞的方法,涉及javascript實(shí)現(xiàn)頁面滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了javaScript實(shí)現(xiàn)滾動(dòng)新聞的方法。分享給大家供大家參考。具體如下：
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">
太平天國醫(yī)療衛(wèi)生組織，在國家制度上，有一定的組織，已經(jīng)形成為一
種正規(guī)化的制度。它可分為朝內(nèi)、軍中、居民三個(gè)系統(tǒng)。
種正規(guī)化的制度。它可分為朝內(nèi)、軍中、居民三個(gè)系統(tǒng)。
種正規(guī)化的制度。它可分為朝內(nèi)、軍中、居民三個(gè)系統(tǒng)。
種正規(guī)化的制度。它可分為朝內(nèi)、軍中、居民三個(gè)系統(tǒng)。種正規(guī)化的制度。它可分為朝內(nèi)、軍中、居民三個(gè)系統(tǒng)。種正規(guī)化的制度。它可分為朝內(nèi)、軍中、居民三個(gè)系統(tǒng)。種正規(guī)化的制度。它可分為朝內(nèi)、軍中、居民三個(gè)系統(tǒng)。種正規(guī)化的制度。它可分為朝內(nèi)、軍中、居民三個(gè)系統(tǒng)。種正規(guī)化的制度。它可分為朝內(nèi)、軍中、居民三個(gè)系統(tǒng)。種正規(guī)化的制度。它可分為朝內(nèi)、軍中、居民三個(gè)系統(tǒng)。
</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; //滾動(dòng)速度
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);
//顯示區(qū)域樣式
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";//當(dāng)文檔實(shí)際高度大于容器時(shí)，高度為實(shí)際文檔高度，否則為容器高度
//顯示區(qū)域初始化
switch(o.direction){
case "up":
target.scrollTop="0";
o.addAfterNode();
break;
case "down":
o.addBeforeNode();
target.scrollTop=target.scrollHeight-o.height;
break;
}
//初始動(dòng)作
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";//當(dāng)文檔實(shí)際高度大于容器時(shí)，高度為實(shí)際文檔高度，否則為容器高度
},
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";//當(dāng)文檔實(shí)際高度大于容器時(shí)，高度為實(shí)際文檔高度，否則為容器高度
},
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程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JavaScript實(shí)現(xiàn)的Tween算法及緩沖特效實(shí)例代碼
- JavaScript中的勻速運(yùn)動(dòng)和變速(緩沖)運(yùn)動(dòng)詳細(xì)介紹
- javascript 緩沖效果實(shí)現(xiàn)代碼 推薦
- javascript 緩沖效果 實(shí)現(xiàn)代碼
- javascript 層展開/關(guān)閉，帶緩沖效果
- JavaScript實(shí)現(xiàn)仿新浪微博大廳和騰訊微博首頁滾動(dòng)特效源碼
- javascript實(shí)現(xiàn)列表滾動(dòng)的方法
- javascript實(shí)現(xiàn)狀態(tài)欄文字首尾相接循環(huán)滾動(dòng)的方法
- 純javascript實(shí)現(xiàn)四方向文本無縫滾動(dòng)效果
- JavaScript實(shí)現(xiàn)滾動(dòng)欄效果的方法
- JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法
- JavaScript實(shí)現(xiàn)帶緩沖效果的隨屏滾動(dòng)漂浮廣告代碼
相關(guān)文章
路由就是指隨著瀏覽器地址欄的變化,展示給用戶的頁面也不相同,下面這篇文章主要給大家介紹了關(guān)于如何通過40行原生js代碼實(shí)現(xiàn)前端簡易路由的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
js運(yùn)動(dòng)動(dòng)畫的八個(gè)知識(shí)點(diǎn)
本文給大家分享的是個(gè)人在學(xué)習(xí)js運(yùn)動(dòng)動(dòng)畫的過程中總結(jié)的我們需要注意的8個(gè)知識(shí)點(diǎn)，分別是速度動(dòng)畫、透明度漸變、緩沖運(yùn)動(dòng)、多物體運(yùn)動(dòng)、獲取樣式、任意屬性值、鏈?zhǔn)竭\(yùn)動(dòng)和同時(shí)運(yùn)動(dòng)，非常的詳細(xì)，推薦給小伙伴們。2015-03-03
使用JavaScript實(shí)現(xiàn)點(diǎn)擊循環(huán)切換圖片效果
本文通過實(shí)例代碼給大家介紹了通過js實(shí)現(xiàn)點(diǎn)擊循環(huán)切換圖片效果，需要的朋友參考下2017-09-09
JavaScript 調(diào)試器其實(shí)有很多。當(dāng)然這些僅僅是調(diào)試器而已，與流行的 Java IDE 是沒有辦法相提并論的。2009-02-02
這篇文章主要為大家詳細(xì)解析了BootStrap圖片樣式、輔助類樣式和CSS組件源碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
微信小程序自定義toast實(shí)現(xiàn)方法詳解【附demo源碼下載】
這篇文章主要介紹了微信小程序自定義toast實(shí)現(xiàn)方法,簡單描述了微信小程序自帶toast使用方法,并結(jié)合實(shí)例形式分析了自定義toast的定義與使用方法,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了js分頁工具及其具體用法,包括js與css的詳細(xì)實(shí)現(xiàn)代碼與使用方法,需要的朋友可以參考下2015-01-01
javascript 傳統(tǒng)事件模型構(gòu)造的事件監(jiān)聽器實(shí)現(xiàn)代碼
最近做東西需要添加大量的事件，而且要對所有事件進(jìn)行比較細(xì)致的控制，于是便試著寫了個(gè)事件監(jiān)聽器。2010-05-05
JavaScript遞歸函數(shù)定義與用法實(shí)例分析
這篇文章主要介紹了JavaScript遞歸函數(shù)定義與用法,結(jié)合實(shí)例形式分析了javascript遞歸的原理、函數(shù)定義、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-01-01
JS模式之簡單的訂閱者和發(fā)布者模式完整實(shí)例
這篇文章主要介紹了JS模式之簡單的訂閱者和發(fā)布者模式,以一個(gè)完整實(shí)例形式詳細(xì)分析了JS訂閱者和發(fā)布者模式基本實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06