ベストアンサー

テキストをスクロールしてローテーションするには

2009/12/02 23:44

テキストをスクロールしてローテーションしたいと思いますが、シンプルな方法はありますでしょうか。次の用な動きを想定しています。 ------------------------------------- <html> <head> <title>一定時間でローテーションする広告</title> <body>  <script type="text/javascript" src="http://x8.tubakurame.com/ufo/133597903"> </script> <noscript> </noscript>  </body> </html> ------------------------------------- よろしくお願いします。

hitoshi432
お礼率12% (1/8)

JavaScript
回答数8
ありがとう数2

みんなの回答 （8）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2009/12/03 21:41 回答No.7

もう、解決されて、どうでもいいかも知れませんが、まだ締め切ってないようなので少しだけ、簡潔にわかりやすくしました。 <body> <h1 style="position:relative;height:1em;overflow-y:hidden;background-color:silver;"> <span id="title_text" style="position:absolute;top:1em;height:1em;background-color:red;width:100%;"></span> </h1> <div> 本文 </div> <script type="text/javascript" charset="utf-8"> (function(){ var title=["今日のタイトルはJAVASCRIPTの勉強です。", "タイマーの使い方を試してみます。", "スタイル属性の変更でスクロールさせます。"]; var title_elm = document.getElementById("title_text"); var rot_count=0; var scroll_count=10; var rot_timer=setInterval(rot_set(title_elm,title),2000); var scroll_timer; function rot_set(elm,data){ return function(){ if(rot_count>(data.length-1)){ rot_count=0; }else{ elm.innerHTML=data[rot_count]; scroll_timer=setInterval(scrolling(title_elm),100); rot_count++; } } } function scrolling(elm){ return function(){ if(scroll_count>=0){ elm.style.top= (scroll_count/10) + "em"; scroll_count--; }else{ clearInterval(scroll_timer); scroll_count=10; } } } })(); </script> </body>

質問者

お礼 2009/12/04 17:14

ありがとうございました。何とか実装までたどり着けそうです。

その他の回答 (7)

babu_baboo
ベストアンサー率51% (268/525)

2009/12/04 12:33 回答No.8

もう、かいけつされて、どうでもいいかもしれませんが、まだしめきっていないようなので、すこしだけ、めんどうくさくしました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>ここをぐるぐるまわすんじゃ～なかったのかぁ～・・・</title> <style type="text/css"> #waku { 　padding　　: 0; 　overflow　 : auto; 　height　　 : 20px; } </style> <body> <div id="waku"> 　なんだタイトルをまわすのじゃなかったのかぁ～<br> 　まぁ～たしかにほそくをみれば、しからうえにって<br> 　かいてあったよね～<br> 　いつものように、りかいりょくないなぁ～<br> </div> <script type="text/javascript"> var Roller = function ( ) { 　this.init.apply( this, arguments ); }; Roller.prototype.init = function ( targetId, step, interval, cssText ) { 　var cnt, o; 　var e = document.getElementById( targetId ); 　if( 'DIV' !== e.nodeName ) return; 　　var ne = document.createElement( 'DIV' ); 　ne.style.cssText = cssText; 　ne.style.marginBottom = e.offsetHeight + 'px'; 　ne.style.marginTop = e.offsetHeight + 'px'; 　for( cnt = 0; o = e.firstChild; ) 　　 ne.appendChild( o ); 　e.appendChild( ne ); 　e.style.overflow = 'hidden'; 　　this.e = e; 　this.step = step; 　this.hMax = ne.offsetHeight + e.offsetHeight; 　this.top = 0; 　this.interval = interval; 　this.timerId = null; }; Roller.prototype.start = function ( n ) { 　if( 'undefined' === typeof n || 'number' !== typeof n ) n = -1; 　this.flag = n; 　this.timerId = setInterval( (function ( that ) { 　　return function ( ) { 　　　that.loop(); 　　}; 　})( this ), this.interval ); }; Roller.prototype.stop = function ( ) { 　clearInterval( this.timerId ); }; Roller.prototype.loop = function ( ) { 　this.e.scrollTop = this.top; 　this.top += this.step; 　if( this.top > this.hMax ) { 　　this.top = 0; 　　if( this.flag > 0 ) { 　　　this.flag -= 1; 　　　if( 0 == this.flag ) this.stop(); 　　} 　} }; (new Roller( 'waku', 1, 50 )).start(); </script> ぜんかくくうはくは、はんかくにでもしてください

babu_baboo
ベストアンサー率51% (268/525)

2009/12/03 17:20 回答No.6

もっとかんけつに setInterval("title_scrolling()",100); もじれつは、じだいをかんじるじょ。 setInterval( title_scrolling, 100 );

質問者

補足 2009/12/03 21:38

いろいろありがとうございます。

babu_baboo
ベストアンサー率51% (268/525)

2009/12/03 17:18 回答No.5

ちょっときづついているのでこっちに。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>ここをぐるぐるまわすんだなぁ～</title> <body> <script type="text/javascript"> var kurukuru = function ( node, time, interval ) { 　this.counter = 0; 　this.target = node; 　this.interval = interval; 　　this.timerId = setInterval( (function( that ) { 　　return function () { 　　　that.loop(); 　　}; 　})( this ), this.interval); 　　setTimeout( (function (that) { 　　return function () { 　　　that.stop(); 　　}; 　})(this), time); 　　//_______ 　　this.loop = function ( ) { 　　this.target.title = this.target.title.replace(/^(.)(.+)$/,'$2$1'); 　　if( ++this.counter > 600 ) this.stop(); 　}; 　　this.stop = function () { 　　this.timerId && clearInterval( this.timerId ); 　　this.timerId = null; 　}; 　　function getCTime () { 　　return (new Date).getTime(); 　} 　 }; kurukuru.start = function( target, time, interval ) { 　new kurukuru( target, time, interval ); }; kurukuru.start( document, 20000, 20 ); </script>

質問者

補足 2009/12/03 21:36

すいません。説明が足りなくて、タイトルをぐるぐる回すほうに話がいってしまったようですね。

yyr446
ベストアンサー率65% (870/1330)

2009/12/03 17:06 回答No.4

そうか、こおいう時こそ、setInterval()の第一引数に例の「23歳事務系OL一発屋関数の使いまわしで中だしOK」の方を使ってやれば、もっと簡潔にグローバル変数使わなくても書けるのか....

質問者

補足 2009/12/03 21:33

？？

yyr446
ベストアンサー率65% (870/1330)

2009/12/03 16:52 回答No.3

というわけで<title>タグはあきらめて、表示させるテキストを 3個配列に用意して<H1>タグをスクロールして見ました。もっときれいに簡潔にかけるかも <head> ---------------------------------- <script type="text/javascript">  </script> </head> <body> <h1 style="position:relative;height:1em;overflow-y:hidden;background-color:silver;"> <span id="title_text" style="position:absolute;top:0.5em;height:1em;background-color:red">AAAAAAA</span> </h1> ---------------------------------- </body>

質問者

補足 2009/12/03 21:27

すごいかなりいいです。・0番目の表示はいらないかな・スクロールする文字がスクロールする前にチラッと見える・3番目の文字の表示のあと5000ms止まる以外は希望通りです。 <html><head></head> <body> <script type="text/javascript">  </script> <h1 style="position:relative;height:1em;overflow-y:hidden;background-color:white;"> <span id="ad_text" style="position:absolute;top:0em;height:1em;background-color:white">0番目：楽しいイベントを企画していま～す</span> </h1> </body> </html>

babu_baboo
ベストアンサー率51% (268/525)

2009/12/03 14:14 回答No.2

うふ。　だれかみじかくして。^^; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>ここをぐるぐるまわすんだなぁ～</title> <body> <script type="text/javascript"> (function(){var d=document;setInterval(function(){d.title = d.title.replace(/^(.)(.+)$/,'$2$1')},200)})(); </script>

質問者

補足 2009/12/03 20:37

う～むすごい。質問した内容は、bodyの中での下から上へのスクロールなのですが、タイトルもスクロールするんですね。でも、さすがにタイトルで下から上にスクロールってのは無理でしょうね。いえいえ、そういう要望があるわけではありません。(汗)

yyr446
ベストアンサー率65% (870/1330)

2009/12/03 12:07 回答No.1

抜本的な確認どうしても<title>タグでやりたいのですか？ TITLE要素をDOM,CSS操作できるかどうかが鍵かな

質問者

補足 2009/12/03 20:27

いいえ。ソースを動かしていただけるとわかると思いますが、タイトルは変化しません。 bodyの中で広告が下から上にスクロールしています。これをJavaScriptでやりたいのです。

関連するQ&A

ページスクロールの繰り返しと巻き戻し
ページを横スクロールさせるために下記のように記述しました。最後まで行ったら最初に戻ってスクロールを繰り返させるには、何を足してあげればいいのでしょうか？また、最後まで行ったら巻き戻して繰り返すことは可能でしょうか？具体的に教えていただければありがたいです。よろしくお願いします。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>page</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD> <IMG src="1.jpg"><IMG src="2.jpg"> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- 締切済み
- JavaScript
外部JSファイルが読み込まない。
javascriptの勉強をし始めて、二日目の初心者です。 jsファイルを使って、画像をIEで表示させたいのですが、上手く読み込んでくれません。どうか、教えてください。 ---html----------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4,01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="common.js" type=text/javascript" charset="UTF-8"> </script> <script src="showImage2.js" type="text/javascript" charset="UTF-8"> </script> <title>キャラクターの表示</title> </head> <body onlaod="main()"> <noscript>JavaScriptを有効にしてください</noscript> </body> </html> ----js------------------------------------------------------------------------------ var img; function main() { img=document.createElement("img") document.body.appendChild(img); img.src="pcStay.png"; } ------------------------------------------------------------------------------------
- ベストアンサー
- JavaScript
script　表示について
HTMLに関しては初心者です。忍者ツールのアクセス解析に使用するHTMLをgooブログに使ったのですが、投稿した後に記事確認すると、 <SCRIPT src="http://x8.amearare.com/ufo/10961500c" type=text/javascript></SCRIPT> <NOSCRIPT> [PR] 高速バス　大阪</NOSCRIPT> のように出てきてしまうのですが、これはブラウザが対応していないせいだからでしょうか？メモ帳で確認したらちゃんと表示されていたのですが、どうすればいいのか分かりません。もし、何か方法があるのであれば教えてください。 HTMLの元はこれです。  <script type="text/javascript" src="http://x8.amearare.com/ufo/109615000"></script> <noscript><a href="http://x8.amearare.com/bin/gg?109615000" target="_blank"> <img src="http://x8.amearare.com/bin/ll?109615000" border="0"></a><br> <span style="font-size:9px">[PR] <a href="http://unica.rentalurl.net" target="_blank">ユニカ食品</a></span></noscript> 
- 締切済み
- HTML
初歩の問題がうまくいきません。
今日からJAVASCRIPTの勉強をしようと思い、「ゼロからはじめるJAVASCRIPT」という本で勉強しています。１問目からうまく表示できません。ステータスバーに「ようこそ」と表示するだけなのですが。本のとおりに記述したのですけど、うまくいきません。IE９を使っていますが、ステータスバーは表示するようにしました。どこがおかしいのでしょうか。よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript">  </script> <title>箱根温泉物語のトップ</title> </head> <body> <noscript> JavaScriptに対応するブラウザで御覧ください。 </noscript> <h1>箱根温泉物語</h1> </body> </html>
- ベストアンサー
- JavaScript
自動的にスクロールするようにするには
文章が自動的にスクロールするようにしたいので本を見ながらやってみたらできたのですが・・・下がる速度が思ってたほど遅いです。個人的にはもっと高速で下に下がって欲しいのですが超低速で下がっていきます。どうすれば早くなるか教えてください。それともこれ以上早くは下がってくれないとか？ <html> <body> <head> <title></title> </head> <body> <script language="javascript">  </script> ここに自動的にスクロールする文章を打ってます。 gooに投稿できる文字数の関係で消しました。  <script language="javascript"> Scroll(); </script> </body> </html>
- ベストアンサー
- JavaScript
リンク先がそれぞれ別の画像のローテーション表示
3枚の画像をタイマー設定して、ローテーション表示させるバナーを作成したいのですが、それぞれの画像に別のリンク先を設定する記述方法を教えて下さい。とりあえず、ローテーション表示させるために、下記のように記述してみました。 <html> <head> <title>画像切替とリンク先</title> <script language="JavaScript"> </script> </head> <body bgcolor="#FFFFFF" text="#000000"> <a href="#"><img src="01.gif" name="gazo" onLoad="setTimeout('anime()',12000)" border=0></a> </body> </html> まったく他の記述方法でもOKです。宜しくお願いします。
- ベストアンサー
- JavaScript
HPビルダーでFLASHファイルが出来ない
今晩は！ホームページを作ろうと思い、孤軍奮闘中ですが、お手上げ状態なんです。とても素敵な素材を見つけまして、「FLASHテンプレート　花ボード（薔薇）」をDLしまして、いざ挿入。動かない！さて如何した事かと取扱説明書を読んだんですが意味がさっぱりわからず、呆然！ http://hiro003.cool.ne.jp/index2.html 説明書内容抜粋１．HEAD部の編集 HTMLソースのHEAD部（<HEAD>～</HEAD>の間）に、下の青い行をコピーして挿入します。 <HEAD> 　　： <script src="geneisozai_flash.js" language="JavaScript" type="text/javascript"></script> 　　： </HEAD> ２．BODY部の編集 HTMLソースのBODY部（<BODY>～</BODY>の間）に、FLASH表示用のタグを挿入します。 FLASH素材を表示したい箇所に、下の青い行をコピーして挿入します。 <BODY> 　　： <script language="JavaScript" type="text/javascript"> geneisozai_flash("5", "ft_bara1.swf", "600", "400", "#FFFFFF" );</script> <noscript>ブラウザをJavaScript対応に設定してください。</noscript> 　　： </BODY> 『ブラウザをJavaScript対応に設定してください。』って、意味わからないよぉ～～！当然、タイトルやメッセージなど入れられるはずも無く！どなたか、私の様な何も分からない人にでも分かる様に説明して頂けませんでしょうか？？？宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト
liteboxと滑らかスクロールが同時処理出来ない
javascriptのliteboxと滑らかスクロールを１ページ内で行うことができません。 head内スクリプトタブ  <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.page-scroller.js" charset="utf-8"></script>  <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js2/prototype.js"></script> <script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js2/lightbox.js"></script> イメージタグ <a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a> ライトボックスのバージョンはlitebox2.0 滑らかスクロールは下記サイトからダウンロードさせて頂いたものを使ってます。 http://coliss.com/articles/build-websites/operation/javascript/296.html 一方のスクリプトタグをコメントで囲むと囲んでいない方のスクリプトが機能します。また、下の方に記述したスクリプトが機能します。なので上記の場合、liteboxは機能し、滑らかスクロールの方は機能しません。両方機能させるにはどうしたらよいのでしょうか？ジャバスクリプトは初めて使うのであまり詳しくありません。ご教授お願い致します。
- ベストアンサー
- JavaScript
PHP+MySQLで結果を出力したHTMLに、Javascriptの文を入れるにはどうしたらよいでしょうか。
PHP+MySQLで結果を出力したHTMLに、Javascriptの文を入れるにはどうしたらよいでしょうか。 <html> <head> <meta HTTP-EQUIV="Content-type" CONTENT="text/html; charset=euc-jp"> </head> <title>名称</title> <? SQL文省略 print("<script type="text/javascript" src="http://x8.hatiju-hatiya.com/ufo/110179001"></script><noscript><a href="http://x8.hatiju-hatiya.com/bin/gg?110179001" target="_blank"><img src="http://x8.hatiju-hatiya.com/bin/ll?110179001" border="0"></a><br><span style="font-size:9px">[PR] <a href="http://fucoidan.rental-rental.net" target="_blank">フコイダン</a></span></noscript>"); SQL文省略 ?> </body> </html>
- ベストアンサー
- PHP
画像／文字をスクロールさせるスクリプト
表題の通り、JavaScriptで、文字や画像をスクロールさせる外部ライブラリを探しています。今のところ、左へ向けてスクロールしていくものしか発見できませんでした。現状、/jquery-1.3.2.min.js　と、sc_text/jcarousellite_1.0.1.js　を使って、次のようなスクロールまでは出来ています。 http://www.royal-e.com/javascript/test5.htm 【ソース】※相対リンクなので、そのままコピーしても動きません。悪しからずご了承ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>無題ドキュメント</TITLE> <SCRIPT type="text/javascript" src="sc_text/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type="text/javascript" src="sc_text/jcarousellite_1.0.1.js"></SCRIPT> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <DIV class="carousel"> <UL> <LI><IMG src="images/best_1.jpg"></LI> <LI><IMG src="images/best_2.jpg"></LI> <LI><IMG src="images/best_3.jpg"></LI> <LI><IMG src="images/best_4.jpg"></LI> <LI><IMG src="images/best_5.jpg"></LI> <LI><IMG src="images/best_6.jpg"></LI> <LI><IMG src="images/best_7.jpg"></LI> <LI><IMG src="images/best_8.jpg"></LI> <LI><IMG src="images/best_9.jpg"></LI> <LI><IMG src="images/best_10.jpg"></LI> </UL> </DIV> <A href="#" class="prev">戻る</A> <A href="#" class="next">次</A> </BODY> </HTML> 希望としては１．左　右　などのボタンで、スクロールの方向を、簡単に切り替えられる。（もちろん、現在表示の位置から方向が変わる） ⇒例えば、上のサンプルで、５を見逃したら、ボタンを押す（あるいはマウスオン）で回転方向が逆になって、５が左から出てくる　という感じです。２．早送り、巻き戻し　など、スクロールの速度も変更できる。　３や４が表示されているとき、ボタンやマウスオンで、動きが早くなって、９や10まで素早く移動できるという感じです。そのような外部ライブラリをご存知でしたら、教えていただけないでしょうか？ jcarousellite　の改造方法でもけっこうです。スクロールする画像や文字を頻繁に入れ替えたいので、その部分についてはjcarousellite　のように簡単に指定できると、たいへん助かります。
- 締切済み
- JavaScript

テキストをスクロールしてローテーションするには