文字の色を一文字ずつ変更するには？

解決済

質問者：santa3000
質問日時：2008/11/15 10:52
回答数：2件

http://m-karaoke.yahoo.co.jp/index.php?itemid=636

ここにあるのは動画ですが、質問したいことは字幕をこの動画のように一文字ずつ色を変えていきたいのですが、方法論としてはどんなのがあるでしょうか？

候補として上がっているのはjavascriptとactionscriptです。
文字のデーターはＰＨＰを介してデーターベースに保存しています。

通報する

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

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： _pipi_
回答日時：2008/11/15 12:14

<html>

<head>
<style>
.fcscol{color:white; background-color:#f00}
.blrcol{color:green}
.defcol{color:#880}
</style>
</head>
<body>
<p>字幕？</p>
<div id="mess"></div>

<script>
setDisplayString('mess', 'あいうえおかきくけこ', 'defcol', 'fcscol', 'blrcol', 500)

function setDisplayString(elementId, str, css0, css1, css2, wtime){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;

for( var i=0,m=str.length; i<m;i++){
var newobj = document.createElement('span');
newobj.appendChild( document.createTextNode( str.substr( i, 1) ) );
newobj.className = css0;
element.appendChild( newobj );
}
this.elements = element.getElementsByTagName('span');
this.css1 = css1;
this.css2 = css2;
this.cnt = 1;
this.elements[0].className=css1;
this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime);

this.go = function(){
if(this.elements.length>this.cnt){
this.elements[ this.cnt ].className = this.css1;
}
var tmp = this.cnt-1;
if(tmp>-1){
this.elements[ tmp ].className = this.css2;
}
this.cnt++;
if(this.cnt>this.elements.length) clearInterval( this.tmid );
}
}
</script>

- 0
- 件

通報する

この回答へのお礼

早速試させてもらいました。
ばっちり作動しました。
わざわざ全文、掲載してくれてありがとうございます。
この方法でやってみます。

通報する

お礼日時：2008/11/15 13:32

No.2

回答者： _pipi_
回答日時：2008/11/15 12:20

訂正

setDisplayString('mess', 'あいうえおかきくけこ', 'defcol', 'fcscol', 'blrcol', 500)
を
new setDisplayString('mess', 'あいうえおかきくけこ', 'defcol', 'fcscol', 'blrcol', 500)

とりあえず、一度に複数の字幕の変更ができると思います