こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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.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>
<script type="text/javascript">
<!--
function blink() {
if (!document.all) { return; }
for (i = 0; i < document.all.length; i++) {
obj = document.all(i);
if (obj.className == "blink") {
if (obj.style.visibility == "visible") {
obj.style.visibility = "hidden";
} else {
obj.style.visibility = "visible";
}
}
}
setTimeout("blink()", 800);
}
// -->
</script>
</head>
<body onload="blink()">
<h1 class="blink">点滅サンプル</h1>
<p>これは普通の文書</p>
<p class="blink">これは点滅する文章</p>
</body>
</html>

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

投稿日時 - 2010-05-28 19:29:25

QNo.5928475

すぐに回答ほしいです

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

もくししてわかるなら、てきとうなぶひんもそろっていると・・
<!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>

投稿日時 - 2010-05-30 21:20:42

お礼

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

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


【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">テスト1</p>
<p class="a">テスト2</p>
<p class="a">テスト3</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:39

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

こういうのは、どうかな?ばぶぅ~
ぜんかくくうはくもじは、はんかくにしてちょ!
<!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>

投稿日時 - 2010-05-28 23:13:51

お礼

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

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

ANo.1

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

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

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

投稿日時 - 2010-05-28 20:29:58

お礼

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

意図した動作をしている事を確認しました。

応急処置との事ですが、とりあえずご教示いただいたソースで進めていこうと思います。
どうもありがとうございました。

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

投稿日時 - 2010-05-30 14:22:51

あなたにオススメの質問