- ベストアンサー
IEでもFirefoxでも動作する点滅文字について
- Internet ExplorerでもFirefoxでも動作する点滅文字を作成する方法について知りたいです。
- Internet Explorer7では動作するものの、Firefox3.6では動作しない点滅文字の問題が発生しています。
- 点滅時間を設定できる方法や、複数の箇所に設定できる方法を教えてください。MARQUEEタグでは位置あわせがうまくできませんでした。
- iroha_168
- お礼率89% (204/228)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
もくししてわかるなら、てきとうなぶひんもそろっていると・・ <!DOCTYPE html> <title></title> <body> <h1> <span class="a">点</span> <span class="b">滅</span> <span class="a">サ</span> <span class="b">ン</span> <span class="a">プ</span> <span class="b">ル</span> </h1> <script type="text/javascript"> var Blinker = function ( viewTime, hiddenTime ) { this.timerId = null; this.buf = [ ]; this.viewTime = viewTime; this.hiddenTime = hiddenTime; this.mode = false; this.start(); }; Blinker.prototype.view = function ( ) { for( i = 0, I = this.buf.length; i < I; i++ ) this.buf[i].style.visibility = 'visible'; }; Blinker.prototype.hide = function ( ) { for( i = 0, I = this.buf.length; i < I; i++ ) this.buf[i].style.visibility = 'hidden'; }; Blinker.prototype.start = function ( ) { this.timerId && this.stop(); this.loop(); }; Blinker.prototype.loop = function ( ) { this.mode ? this.view(): this.hide(); this.timerId = setTimeout( (function ( that ) { return function ( ) { that.loop(); }; })( this ), this.mode ? this.viewTime: this.hiddenTime ); this.mode = ! this.mode; }; Blinker.prototype.stop = function ( ) { this.timerId && clearInterval( this.timerId ); this.timerId = null; }; Blinker.prototype.add = function ( n ) { n && this.buf.push( n ); }; Blinker.create = function ( viewTime, hiddenTime ) { var obj = new Blinker ( viewTime, hiddenTime || viewTime ); var arg = 2, id, n; while( id = arguments[ arg++ ] ) { n = document.getElementById( id ); n && obj.add( n ); } return obj; }; Blinker.createByClassName = function ( cssName, viewTime, hiddenTime ) { var obj = new Blinker ( viewTime, hiddenTime || viewTime ); var allNode = document.getElementsByTagName( '*' ); var reg = new RegExp( '(?:^|\\s)' + cssName + '(?:$|\\s)' ); var cnt = 0, n; while( n = allNode[ cnt++ ] ) if( n.className && reg.test( n.className ) ) obj.add( n ); return obj; }; var str1 = Blinker.createByClassName( 'a', 400 ); var str2 = Blinker.createByClassName( 'b', 200 ); </script>
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
こういうのは、どうかな？ばぶぅ～ ぜんかくくうはくもじは、はんかくにしてちょ！ <!DOCTYPE html> <title></title> <body> <h1> <span id="a0">点</span> <span id="a1">滅</span> <span id="a2">サ</span> <span id="a3">ン</span> <span id="a4">プ</span> <span id="a5">ル</span> </h1> <p>これは普通の文書</p> <p id="b0">これは点滅する文章</p> <script type="text/javascript"> //@cc_on var Blinker = function ( viewTime, hiddenTime ) { this.timerId = null; this.buf = [ ]; this.viewTime = viewTime; this.hiddenTime = hiddenTime; this.mode = false; this.start(); }; Blinker.prototype.view = function ( ) { for( i = 0, I = this.buf.length; i < I; i++ ) this.buf[i].style.visibility = 'visible'; }; Blinker.prototype.hide = function ( ) { for( i = 0, I = this.buf.length; i < I; i++ ) this.buf[i].style.visibility = 'hidden'; }; Blinker.prototype.start = function ( ) { this.timerId && this.stop(); this.loop(); }; Blinker.prototype.loop = function ( ) { this.mode ? this.view(): this.hide(); this.timerId = setTimeout( (function ( that ) { return function ( ) { that.loop(); }; })( this ), this.mode ? this.viewTime: this.hiddenTime ); this.mode = ! this.mode; }; Blinker.prototype.stop = function ( ) { this.timerId && clearInterval( this.timerId ); this.timerId = null; }; Blinker.prototype.add = function ( n ) { n && this.buf.push( n ); }; Blinker.create = function ( viewTime, hiddenTime ) { var obj = new Blinker ( viewTime, hiddenTime || viewTime ); var arg = 2, id, n; while( id = arguments[ arg++ ] ) { n = document.getElementById( id ); n && obj.add( n ); } return obj; }; //____________________ var str1 = Blinker.create( 200, 100, 'a0', 'a2', 'a4' ); var str2 = Blinker.create( 400, 200, 'a1', 'a3', 'a5' ); var str3 = Blinker.create( 1000, 500, 'b0' ); </script> </body> </html>
お礼
ご回答ありがとうございます。 ご教示いただいたソースを目視したところ、 想定動作の 2 が満たされていないようでした。 【1】 私の環境では、現状 id 名が固定になってしまう為です (id を振る部分のプログラムを動的にして a + 連番 という形にできれば 使えるかも知れませんが)。 <span id="a0">点</span> <span id="a0">滅</span> <span id="a0">サ</span> <span id="a0">ン</span> <span id="a0">プ</span> <span id="a0">ル</span> 【2】 下記のソースからは id の数が固定のような印象を受けました。 var str1 = Blinker.create( 200, 100, 'a0', 'a2', 'a4' ); var str2 = Blinker.create( 400, 200, 'a1', 'a3', 'a5' ); var str3 = Blinker.create( 1000, 500, 'b0' ); 私の環境では、ページ毎に点滅する数が異なり、 数個の場合もあれば、数十個の場合もあり、 何個になるかはデータに依存しています。 以上、よろしくお願いします。
- fujillin
- ベストアンサー率61% (1594/2576)
最初の document.all で思いっきり return しちゃってるのでは？ とりあえずの応急処置 function blink() { //if (!document.all) { return; } var all = document.getElementsByTagName('*'); for (i = 0; i < all.length; i++) { obj = all[i]; ---以下そのまま--- しかし、毎回全部の中から探すというのもねぇ…
お礼
ご回答ありがとうございます。 意図した動作をしている事を確認しました。 応急処置との事ですが、とりあえずご教示いただいたソースで進めていこうと思います。 どうもありがとうございました。 以上、よろしくお願いします。
お礼
ご回答ありがとうございます。 ご教示いただいたソースを試してみたところ、 意図した動作をしている事を確認しました。 【index.html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>title</title> </head> <body> <h1> <span class="a">点</span> <span class="b">滅</span> <span class="a">サ</span> <span class="b">ン</span> <span class="a">プ</span> <span class="b">ル</span> </h1> <p class="a">テスト１</p> <p class="a">テスト２</p> <p class="a">テスト３</p> <script type="text/javascript" src="blink.js"></script> </body> </html> 【blink.js(ご教示いただいたjavascriptをそのまま貼り付けました。)】 var Blinker = function ( viewTime, hiddenTime ) { 略 var str2 = Blinker.createByClassName( 'b', 200 ); そのたびはどうもありがとうございました。 以上、よろしくお願いします。