BBS
HTML
CSS
JavaScript
DHTML
フィルタ
CGI
アクセス向上
音楽&動画
カラー
画像
フォント
特殊文字
HP作成リンク
サイト宣伝リンク
ACCESS R
ホーム
>
DHTML
>
テキストムーブ(1)
■説明
テキストが画面の端から次々と現れます。IE4から動作します。N4からも動作します。一応クロスブラウザー(IE/Nに対応しているという意味)となっています。DHTMLの機能です。動的なページを作ることが出来ます。
■ソース
<HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <SCRIPT TYPE="text/javascript"> <!-- //―――――――――――――――――――――――――――――――――――――― // 作成者:るび〜 ACCESS R http://www5e.biglobe.ne.jp/~access_r/ //―――――――――――――――――――――――――――――――――――――― //―――――――――――――――――――――――――――――――――――――― // ユーザが設定する部分はここから!! //―――――――――――――――――――――――――――――――――――――― //以下の文字を変更すると表示されるテキストが変わります。 word1 = "こんにちわ!!"; word2 = "ACCESS Rです。"; word3 = "よろしくお願いしますね!"; //x座標の変数設定(文字が最初に現れる場所です) x = 1000; //スピードの変数設定(この値を小さくする程テキストの移動スピードが速くなります) speed = 100; //―――――――――――――――――――――――――――――――――――――― // ユーザが設定する部分はここまで!! //―――――――――――――――――――――――――――――――――――――― line = 0; //x座標移動用の変数(初期値) count = 1; //ID,NAME変更用の変数(初期値) document.write('<STYLE TYPE="text/css"><!--'); document.write('.texta {position:absolute;width:100%;top:120px;left:1000px;display:none;}'); document.write('.textb {position:absolute;width:100%;top:140px;left:1000px;display:none;}'); document.write('.textc {position:absolute;width:100%;top:160px;left:1000px;display:none;}'); document.write('--></STYLE>'); function TextMove(countd){ time = setTimeout("TextMove(count)", speed); if(line <= x){ id = "text" + countd; //document.allがサポートされている場合 if(document.all){ document.all(id).style.left = x - line; document.all(id).style.display = "block"; //document.layersがサポートされている場合 }else if(document.layers){ document.layers[id].visibility = "show"; document.layers[id].left = x - line; //document.getElementByIdがサポートされている場合 }else if(document.getElementById){ document.getElementById(id).style.left = x - line; document.getElementById(id).style.display = "block"; }else{ clearTimeout(time); return; } line += x / 10; }else{ if(count <= 2){ count++; line = 0; }else{ clearTimeout(time); } } } window.onload = new Function("TextMove(count)"); //--> </SCRIPT> <TITLE>テキストムーブ(1)</TITLE> </HEAD> <BODY> <SCRIPT TYPE="text/javascript"> <!-- if(document.all || document.getElementById){ document.write('<SPAN CLASS="texta" ID="text1">' + word1 + '</SPAN>'); document.write('<SPAN CLASS="textb" ID="text2">' + word2 + '</SPAN>'); document.write('<SPAN CLASS="textc" ID="text3">' + word3 + '</SPAN>'); }else if(document.layers){ document.write('<LAYER NAME="text1" VISIBILITY="hidden" TOP="120">' + word1 + '</LAYER>'); document.write('<LAYER NAME="text2" VISIBILITY="hidden" TOP="140">' + word2 + '</LAYER>'); document.write('<LAYER NAME="text3" VISIBILITY="hidden" TOP="160">' + word3 + '</LAYER>'); } //--> </SCRIPT> </BODY> </HTML>
■ソースの説明
ユーザが設定する部分はコメントに記述してある部分をよく読んで設定してください。
使用しているものは、「
document.all
」と「
document.layers
」と「
document.getElementById
」の3つ使用することによって両ブラウザに対応しています。対応していないブラウザに関しては何も表示しないようになっています。
■対応ブラウザ
テキストムーブ
IE3
IE4
IE5
IE5.5
IE6
N3
N4
N6
N7
O6
×
●
●
●
●
×
●
●
●
×
[
ホーム
] [
DHTML
] [
↑ページ最上部へ戻る
]
簡単に1クリックで宣伝広告!!
個人が全ての検索エンジンやメルマガ等に登録していくのは、非常に大変な労力となっています。しかし、
簡単に検索エンジン、リンク集、掲示板、メルマガの全てに1クリック
でPRが出来てしまいます。
Copyright © 2000-2003 ACCESS R All rights reserved. Presented by Ruby