JS+CSSは、2行のテキストを左から右に漸次的に表示する効果を実現します.

2123 ワード

通常、テキストの漸次効果は図やフラッシュで作られます.ここはUIを探しに行くのがおっくうです.自分で書いてください.背景図があれば撮ってください.文字効果は私のものを聞きます.
スタート-->
背景: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>
<---終了
終了語:自分で遊んでいます.舞台裏をやっていることが多いですが、フロントも面白いです.