IEでもFirefoxでも動作する点滅文字について

解決済

質問者：iroha_168
質問日時：2010/05/28 19:29
回答数：3件

IEでもFirefoxでも動作する点滅文字について

Internet ExplorerでもFirefoxでも動作する点滅文字を作成するため、
下記のサンプルソースを作成したのですが、
Internet Explorer7では動作するものの、Firefox3.6では動作しませんでした。

その為、Internet ExplorerでもFirefoxでも動作する点滅文字の方法をご存知の方がいらっしゃいましたら、
ご教示の程、よろしくお願いします。

なお、下記の動作を想定しています。
1. 点滅時間は設定ファイルに記述して、点滅時間を調整したいと思います
(その為、<blink>タグは使用できないかも知れません)。
2. ページ内の複数の箇所に設定したいと思います
(ただし、設定箇所が何箇所になるかは、ページが動的に生成されているため、ランダムです。
その為、id属性で動作するものは使用できないかも知れません)。
3. MARQUEEタグを使用するものについては、位置あわせがうまく出来ませんでした。

【ソース】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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>
<script type="text/javascript">

</script>
</head>
<body onload="blink()">
<h1 class="blink">点滅サンプル</h1>
<p>これは普通の文書</p>
<p class="blink">これは点滅する文章</p>
</body>
</html>

以上、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： babu_baboo
回答日時：2010/05/30 21:20

もくししてわかるなら、てきとうなぶひんもそろっていると・・

<!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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

ご教示いただいたソースを試してみたところ、
意図した動作をしている事を確認しました。

【index.html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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 );

そのたびはどうもありがとうございました。

以上、よろしくお願いします。

通報する

お礼日時：2010/05/31 23:12

No.2

回答者： babu_baboo
回答日時：2010/05/28 23:13

こういうのは、どうかな？ばぶぅ～

ぜんかくくうはくもじは、はんかくにしてちょ！
<!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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

ご教示いただいたソースを目視したところ、
想定動作の 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' );

私の環境では、ページ毎に点滅する数が異なり、
数個の場合もあれば、数十個の場合もあり、
何個になるかはデータに依存しています。

以上、よろしくお願いします。

通報する

お礼日時：2010/05/30 14:32

No.1

回答者： fujillin
回答日時：2010/05/28 20:29

最初の　document.all で思いっきり return　しちゃってるのでは？

とりあえずの応急処置
function blink() {
//if (!document.all) { return; }
var all = document.getElementsByTagName('*');
for (i = 0; i < all.length; i++) {
obj = all[i];
---以下そのまま---

しかし、毎回全部の中から探すというのもねぇ…