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>
希望本文所述對大家的javascript程式設計有所幫助。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數
