- ベストアンサー
文字の色を一文字ずつ変更するには？
http://m-karaoke.yahoo.co.jp/index.php?itemid=636 ここにあるのは動画ですが、質問したいことは字幕をこの動画のように一文字ずつ色を変えていきたいのですが、方法論としてはどんなのがあるでしょうか？ 候補として上がっているのはjavascriptとactionscriptです。 文字のデーターはＰＨＰを介してデーターベースに保存しています。
- santa3000
- お礼率72% (13/18)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<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>
その他の回答 (1)
訂正 setDisplayString('mess', 'あいうえおかきくけこ', 'defcol', 'fcscol', 'blrcol', 500) を new setDisplayString('mess', 'あいうえおかきくけこ', 'defcol', 'fcscol', 'blrcol', 500) とりあえず、一度に複数の字幕の変更ができると思います
お礼
早速試させてもらいました。 ばっちり作動しました。 わざわざ全文、掲載してくれてありがとうございます。 この方法でやってみます。