ローリング news_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 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。
