- ベストアンサー
テキストをスクロールしてローテーションするには
テキストをスクロールしてローテーションしたいと思いますが、シンプルな方法はありますでしょうか。 次の用な動きを想定しています。 ------------------------------------- <html> <head> <title>一定時間でローテーションする広告</title> <body> <!--shinobi1--> <script type="text/javascript" src="http://x8.tubakurame.com/ufo/133597903"> </script> <noscript> </noscript> <!--shinobi2--> </body> </html> ------------------------------------- よろしくお願いします。
- hitoshi432
- お礼率12% (1/8)
- JavaScript
- 回答数8
- ありがとう数2
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
もう、解決されて、どうでもいいかも知れませんが、まだ締め切ってないようなので 少しだけ、簡潔にわかりやすくしました。 <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>
その他の回答 (7)
- babu_baboo
- ベストアンサー率51% (268/525)
もう、かいけつされて、どうでもいいかもしれませんが、 まだしめきっていないようなので、 すこしだけ、めんどうくさくしました。 <!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)
もっとかんけつに setInterval("title_scrolling()",100); もじれつは、じだいをかんじるじょ。 setInterval( title_scrolling, 100 );
補足
いろいろありがとうございます。
- babu_baboo
- ベストアンサー率51% (268/525)
ちょっときづついているのでこっちに。 <!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>
補足
すいません。 説明が足りなくて、タイトルをぐるぐる回すほうに 話がいってしまったようですね。
- yyr446
- ベストアンサー率65% (870/1330)
そうか、こおいう時こそ、setInterval()の第一引数に 例の「23歳事務系OL一発屋関数の使いまわしで中だしOK」の方 を使ってやれば、もっと簡潔にグローバル変数使わなくても 書けるのか....
補足
？？
- yyr446
- ベストアンサー率65% (870/1330)
というわけで<title>タグはあきらめて、表示させるテキストを 3個配列に用意して<H1>タグをスクロールして見ました。 もっときれいに簡潔にかけるかも <head> ---------------------------------- <script type="text/javascript"> <!-- var interval0,interval1,count0,count1; var title_area,title_text; var title=["今日のタイトルはJAVASCRIPTの勉強です。", "タイマーの使い方を試してみます。", "スタイル属性の変更でスクロールさせます。"]; window.onload = function () { count0=0; interval0=setInterval("title_scroll()",2000); } function title_scroll(){ if (count0<3){ title_text = document.getElementById("title_text"); title_text.innerHTML=title[count0]; count1=10; interval1=setInterval("title_scrolling()",100); count0++; }else{ count0=0; } } function title_scrolling(){ if(count1>=0){ title_text.style.top= (count1/10) + "em"; count1--; }else{ clearInterval(interval1); } } // --> </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>
補足
すごい かなりいいです。 ・0番目の表示はいらないかな ・スクロールする文字がスクロールする前にチラッと見える ・3番目の文字の表示のあと5000ms止まる 以外は希望通りです。 <html><head></head> <body> <script type="text/javascript"> <!-- var interval0,interval1,count0,count1; var ad_text; var ad=[ "1番目：<a href='http://google.co.jp' target='blank'>Googleです</a>", "2番目：<a href='http://yahoo.co.jp/' target='blank'>Yahooです</a>", "3番目：<a href='http://goo.ne.jp/' target='blank'>Gooです</a>" ]; window.onload = function () { count0=0; interval0=setInterval("ad_scroll()",5000); } function ad_scroll(){ if (count0<3){ ad_text = document.getElementById("ad_text"); ad_text.innerHTML=ad[count0]; count1=10; interval1=setInterval("ad_scrolling()",50); count0++; }else{ count0=0; } } function ad_scrolling(){ if(count1>=0){ ad_text.style.top= (count1/10) + "em"; count1--; }else{ clearInterval(interval1); } } // --> </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)
うふ。 だれかみじかくして。^^; <!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>
補足
う～む すごい。 質問した内容は、bodyの中での下から上へのスクロールなのですが、 タイトルもスクロールするんですね。 でも、さすがにタイトルで下から上にスクロールってのは無理でしょうね。 いえいえ、そういう要望があるわけではありません。(汗)
- yyr446
- ベストアンサー率65% (870/1330)
抜本的な確認 どうしても<title>タグでやりたいのですか？ TITLE要素をDOM,CSS操作できるかどうかが鍵かな
補足
いいえ。 ソースを動かしていただけるとわかると思いますが、 タイトルは変化しません。 bodyの中で広告が下から上にスクロールしています。 これをJavaScriptでやりたいのです。
お礼
ありがとうございました。 何とか実装までたどり着けそうです。