JS+CSSは、2行のテキストを左から右に漸次的に表示する効果を実現します.
2123 ワード
通常、テキストの漸次効果は図やフラッシュで作られます.ここはUIを探しに行くのがおっくうです.自分で書いてください.背景図があれば撮ってください.文字効果は私のものを聞きます.
スタート-->
背景:1)2行のテキストが、左から右へ、漸次表示されます.2)最初の行の文字:登録を歓迎する.二行目の文字:私は二行目のHOHOです.
------------------背景紹介完了---------------.
1.bodyにDIVを2つ入れます
終了語:自分で遊んでいます.舞台裏をやっていることが多いですが、フロントも面白いです.
スタート-->
背景:1)2行のテキストが、左から右へ、漸次表示されます.2)最初の行の文字:登録を歓迎する.二行目の文字:私は二行目のHOHOです.
------------------背景紹介完了---------------.
1.bodyにDIVを2つ入れます
<div id="textface" style='font-size:48px;color:#FFFFFF;float:left;margin-top:170;margin-left:250'></div>
<div id="textfacebom" style='font-size:48px;color:#FFFFFF;float:left;margin-top:218;margin-left:0'></div>
2、JSコントロール実現特効<script language="JavaScript">
var interval = 120;// ( )
var msg = " " ;// , :
var seq=0,len = msg.length;
var msg2 = " HOHO ";// , : , interval
var seq2=0,len2 = msg2.length;
function textScroll2() {
try{
document.getElementById("textfacebom").innerHTML = msg2.substring(0, seq2+1);
}catch(e){}
seq2++;
if ( seq2 >= len2 ) {
seq2 = 0;
document.getElementById("textfacebom").innerHTML = '';
return;
}
window.setTimeout("textScroll2();", interval );
}
function textScroll() {
try{
document.getElementById("textface").innerHTML = msg.substring(0, seq+1);
window.status = msg.substring(0, seq+1);//
}catch(e){}
seq++;
if(seq == 5){
textScroll2();
}
if ( seq >= len ) {
seq = 0;
document.getElementById("textface").innerHTML = '';
document.getElementById("textfacebom").innerHTML = '';
window.setTimeout("textScroll();", interval );
}
else
window.setTimeout("textScroll();", interval );
}
textScroll();
</script>
<---終了終了語:自分で遊んでいます.舞台裏をやっていることが多いですが、フロントも面白いです.