|
| カレッヂ |
質問者 もも
投稿日 2004/5/15(土) 00:41:13
JavaScriptというのかも解らないのですが、文字わ１文字ずつ表示させ、それを上へ スクロールせたいのですが、その方法が解りません。 別々に１つのことをするなら何とか調べることが出来たのですが、この方法は見つかり ませんでした。 どうぞ宜しくお願いします。
プロバイダ参照： |
回答者 いのちゃん
[削除]
投稿日 2004/5/15(土) 02:34:01
http://www.kcb-net.ne.jp/ki-net/page94.html 上記urlから表示(V)→ソース(C) を開いて、 Line35に msg = "welcome to Dynamic HTML world !!"; がありますので、この中の文字を入れ替えて見て下さい。 |
回答者 いのちゃん
[削除]
投稿日 2004/5/15(土) 13:27:22
ちょっと勘違いをしておりました。どうもすみません。 ご指摘のように文字を1文字ずつ表示さすだけでありましたので、必要にして十分な 解答でなかったようですみませんでした。 http://www.kcb-net.ne.jp/ki-net/change/index.shtml こちらのurlは表示された文字を上にスクロールさしております。 その両者の合体は未だ試みておりませんので何かのヒントになれば幸いです。 |
回答者 いのちゃん
[削除]
投稿日 2004/5/15(土) 13:45:13
先程の追記になりますが、文字が上にスクロールするもう1つの例として http://www.kcb-net.ne.jp/ki-net/ana106/ 画面右下にあります“DynEd”をクリックして貰えば、文字にカラーを付けて順次上に 文字がスクロールするようにしております。 但しご希望のように1文字ずつ表示させて上にスクロール出来るようにはしておりません。飽く迄もご参考程度にして下さい。 |
回答者 Kanasan
[削除]
投稿日 2004/5/23(日) 02:22:33
腕試しにコーディングしてみました。
ブラウザ(and バージョン)依存の処理が少々入っているので注意して下さい。
<html>
<head>
<script>
<!--
//処理文字列 ←■■■■好みで変更
var str = "文字を１文字ずつ表示させ、それを上へスクロールさせたい。";
//処理開始時の色(RGB別2桁16進法) ←■■■■好みで変更
var aClrInit = new Array("00","00","00");
//処理終了時の色(RGB別2桁16進法) ←■■■■好みで変更
var aClrTerm = new Array("ff","00","00");
//処理の木目細かさ(正の整数) ←■■■■好みで変更
var intCntMax = 30;
//各文字間の処理の遅延 ←■■■■好みで変更
var delay = 50;
//処理間隔 ←■■■■好みで変更
var intrvl = 50;
function fncLoad(){
//生成HTML保存領域
var strHtml = "";
//各文字のHTMLを順に作成
for(var i=0;i<str.length;i++){
strHtml += "<span id=str" + i + " style=\"position:relative;color:#" + aClrInit.join() + ";\">" + str.charAt(i) + "</span>";
}
//作成したHTMLを画面に反映
document.getElementById("str").innerHTML = strHtml;
//文字色・文字位置変更開始
fncTimer();
}
function fncTimer(){
var aClrBuf = new Array(3); //処理色保存領域
var prog; //進捗度合
var cnt = (fncTimer.arguments.length==1)?fncTimer.arguments[0]:0; //関数の実行回数
//一文字毎に処理
for(var i=0;i<str.length;i++){
//何文字目かにより進捗状況に遅延を生じさせる
prog = (cnt-delay*i/str.length)/intCntMax;
//0<=prog<=1
prog = (prog<0)?0:prog;
prog = (prog>1)?1:prog;
//RGB別に色を処理
for(var j=0;j<aClrBuf.length;j++){
//色を10進法で取得(色移行の計算) ←■■■■好みで変更
aClrBuf[j] = Math.round( parseInt(aClrInit[j],16) * (1-prog) +
parseInt(aClrTerm[j],16) * (0+prog) );
//色として使用できない場合丸め込む
aClrBuf[j] = ((aClrBuf[j]<parseInt("00",16))?parseInt("00",16):aClrBuf[j]);
aClrBuf[j] = ((aClrBuf[j]>parseInt("ff",16))?parseInt("ff",16):aClrBuf[j]);
//2桁16進法にする
aClrBuf[j] = ("00" + fncColorStr(aClrBuf[j])).slice(-2);
}
//文字色反映
document.getElementById("str"+i).style.color = "#" + aClrBuf.join("");
//文字位置反映(位置移動の計算) ←■■■■好みで変更
document.getElementById("str"+i).style.top = Math.pow((1-prog),2)*500;
document.getElementById("str"+i).style.left = 0;//Math.pow((1-prog),1)*50*(i-str.length/2);
}
//終了判定
if(cnt<intCntMax+delay){
//カウントアップ
cnt++;
//関数再実行
setTimeout("fncTimer("+cnt+")",intrvl);
}
}
//10進法を16進法に変更する関数
function fncColorStr(intColor){
var intColorBuf = intColor;
var strColorReturn = "";
var aClrDef = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
do{
strColorReturn = aClrDef[intColorBuf % 16] + strColorReturn;
intColorBuf = Math.floor(intColorBuf / 16);
}while(intColorBuf!=0);
return strColorReturn;
}
//-->
</script>
</head>
<body onload="fncLoad();" style="background-Color:#000000;">
<div id="str" style="text-align:center;font-weight:bold;"></div>
</body>
</html>
|
回答者 Kanasan
[削除]
投稿日 2004/5/23(日) 02:25:16
補足: 4Tabで表示すると見やすいようになっています。 |
回答者 Kanasan
[削除]
投稿日 2004/5/24(月) 13:59:44
徐々に文字を表示なんてどこにも書いていませんね。
失礼しました。m(_ _)m
以下、新しいコードです。
お好みで数値を調整して使用して下さい。
文章を表示した後、スクロールまでの時間が短い時は
改造して対応もできますが、
文字列の後に半角スペースを入れて調整すると
改造は必要ありません。
例:"朝の挨拶\n↓\nおはようございます "
<html>
<head>
<script>
<!--
var astr = new Array();
astr[0] = "朝の挨拶\n↓\nおはようございます";
astr[1] = "昼の挨拶\n↓\nこんにちは";
astr[2] = "夜の挨拶\n↓\nこんばんは";
var posX = 0;
var posY = 100;
function fncDisp(cnt,len,scrl){
//全ての文字を表示したか否か
if(len==astr[cnt].length){
//--------------------
//スクロール処理
//--------------------
//スクロール位置カウントアップ
scrl++;
//スクロール位置指定
document.getElementById("str").style.clip = "rect("+scrl+"px,150px,100px,0px)";
document.getElementById("str").style.left = posX+"px";
document.getElementById("str").style.top = (posY-scrl)+"px";
//スクロール位置判定
if(scrl>100){
//文章カウントアップ
cnt++;
//最後の文章だったか否か
if(cnt!=astr.length){
//次の文章処理の継続
setTimeout("fncDisp("+cnt+",0,0);",100);
}else{
//文章の処理を最初から開始(ループ)
setTimeout("fncDisp(0,0,0);",100);
}
}else{
//スクロール処理の継続
setTimeout("fncDisp("+cnt+","+len+","+scrl+");",50);
}
}else{
//--------------------
//文字の表示処理
//--------------------
//最初の文字か否か
if(len==0){
//スクロール位置をリセット
document.getElementById("str").style.clip = "rect(0px,150px,100px,0px)";
document.getElementById("str").style.left = posX+"px";
document.getElementById("str").style.top = posY+"px";
}
//文字カウントアップ
len++;
//文字表示処理
document.getElementById("str").innerText = astr[cnt].slice(0,len);
//文字表示処理の継続
setTimeout("fncDisp("+cnt+","+len+",0);",100);
}
}
//-->
</script>
</head>
<body onload="fncDisp(0,0,0);" style="background-Color:#ffffff;">
<div id="str" style="position:absolute;color:#ff0000;"></div>
</body>
</html>
|
回答者 Kanasan
[削除]
投稿日 2004/5/24(月) 14:43:16
補足です。 相変わらずブラウザ依存の処理がありますので 注意して下さい。 |
質問者 もも
[削除]
投稿日 2004/5/24(月) 19:01:35
いのちゃんサン、お礼が遅くなってすみません。 お二人には、教えてほしいことをきちんと説明することも出来なくて、私の説明不足の為に 無駄なことをさせてしまって、本当にすみませんでした。 回答して下さり、お礼を申し上げます。 ありがとうごさいました。 特にKanasanサンには、そのまま使えるコードを２度も、親切に教えて下さり、本当に 感謝しています。 ありがとうございました。 これから少し加工をして、頑張ってみます。 またどこかでお目にかかったら、知恵を貸して下さい。 お願いします。 お元気で・・・・ |
このページは終了したので返信(回答)は書きこめません
| Ｗｅｂ裏技 |