|
|
|
03/16(Sun) 01:42
 ペ−ジへ入ると文字や画像がスライドして現われる
【お知らせ】Netscape 6,7、Opera6でも動作するよう機能追加しました（2003/04/27）
ページをオープンすると、タイトルや画像など複数のレイヤーがスライドして現れます。このDHTMLは「だれでもカンタンDynamicHTMLサンプル集」からの引用です。
■設置方法
| 使用するCross-Browser function | slideLAYERs |
| スタイルシート | titlepos |
■ヘッダー部に以下のスタイルシート、関数を定義します。
変更する箇所は以下の２カ所です。あなたのページレイアウトに合わせて変更して下さい。
- スタイルシート内の文字(font-size:25pt)、レイヤー幅(width:230)、文字色(green、magenta、red)
- 関数slideini()内のslideLAYERsのパラメータ値(スライド開始座標と終了座標、スピードなど)
|
<![CDATA[
<STYLE TYPE="text/css">
<!--
/*--------------------------------------------------------------------
Dynamic HTML cross-browser for NC4.0 and IE4.0
--------------------------------------------------------------------*/
.titlepos { position:absolute;left:-100;top:-100;font-size:25pt;width:230 }
#title1 { color:green }
#title2 { color:magenta }
#title3 { color:red }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Cross-Browser function -------------------------------------------
// 複数レイヤースライド
var wx=new Array()
var wy=new Array()
var ex=new Array()
var ey=new Array()
var spd=new Array()
var step=new Array()
var stepX=new Array()
var stepY=new Array()
var mvFlag=new Array()
var slideID=new Array()
var count=new Array()
function slideLAYERs(layName,startX,startY,endX,endY,speed,stpx){
//--移動初期化
if(!mvFlag[layName]){
clearTimeout(slideID[layName])
count[layName]=0 //--移動回数カウント(ステップ数)
var ofX=(endX-startX) //--移動距離x
var ofY=(endY-startY) //--移動距離y
step[layName]=
Math.max(Math.abs(ofX),Math.abs(ofY))/stpx //--移動ステップ数
stepX[layName]=ofX/step[layName] //--移動量x／ステップ
stepY[layName]=ofY/step[layName] //--移動量y／ステップ
wx[layName]=startX //--移動中のx座標
wy[layName]=startY //--移動中のy座標
ex[layName]=endX //--到着場所のx座標
ey[layName]=endY //--到着場所のy座標
spd[layName]=speed //--移動スピ−ド
mvFlag[layName]=true //--移動中ならtrue
}
if(mvFlag[layName]&&(count[layName]<=step[layName]-1)){
count[layName]++
wx[layName]+=stepX[layName]
wy[layName]+=stepY[layName]
clearTimeout(slideID[layName])
slideID[layName]=
setTimeout('slideLAYERs("'+layName+'")',spd[layName])
}else{
//--停止
wx[layName]=ex[layName]
wy[layName]=ey[layName]
clearTimeout(slideID[layName]);mvFlag[layName]=false
}
//--移動
if(document.all)document.all(layName).style.posLeft=wx[layName] //IE4,5,6,Opera6用
if(document.all)document.all(layName).style.posTop=wy[layName]
if(document.layers)document.layers[layName].moveTo(wx[layName],wy[layName]) //NN4用
//NN6,7用
if(document.getElementById)document.getElementById(layName).style.left=wx[layName]
if(document.getElementById)document.getElementById(layName).style.top=wy[layName]
}
// Cross-Browser function (end)--------------------------------------
window.onload=slideini //ぺ−ジロ−ド完了後function slideiniを実行する
function slideini(){
mvFlag['image1']=false;slideLAYERs('image1',-200,-20,400,80,40,7) //img
mvFlag['title1']=false;slideLAYERs('title1',100,-30,95,104,60,9) //green
mvFlag['title2']=false;slideLAYERs('title2',-150,100,94,102,10,10)//magenta
mvFlag['title3']=false;slideLAYERs('title3',550,180,93,100,1,20) //red
}
//-->
</SCRIPT>
]]>
|
■ボディ部に以下の記述をします。
変更する箇所は以下の２カ所です。あなたのページに合わせて変更して下さい。
- タイトル文字（菊池さんちのホームページにようこそ！）
- 画像の場所（../gif/totoro.gif）
|
<![CDATA[
<!-- 複数レイヤースライド -->
<DIV CLASS="titlepos" ID="title1">菊池さんちの<br>ホームページに<br>ようこそ！</DIV>
<DIV CLASS="titlepos" ID="title2">菊池さんちの<br>ホームページに<br>ようこそ！</DIV>
<DIV CLASS="titlepos" ID="title3">菊池さんちの<br>ホームページに<br>ようこそ！</DIV>
<DIV CLASS="titlepos" ID="image1"><IMG SRC="../gif/totoro.gif"></DIV>
]]>
|
＜応用＞「DHTML未対応ブラウザ用のメッセ−ジ」「JavaScript未対応、JavaScript設定「無効」ブラウザ用のメッセ−ジ」の処理を追加する場合はJavaScriptを使って下のようにします。
|
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!--
//--DHTML対応ブラウザの場合だけ処理する
if(document.layers||document.all||document.getElementById){
//複数レイヤースライド
var DOC =''
DOC+='<DIV CLASS="titlepos" ID="title1">菊池さんちの<br>ホームページに<br>ようこそ！</DIV>'
DOC+='<DIV CLASS="titlepos" ID="title2">菊池さんちの<br>ホームページに<br>ようこそ！</DIV>'
DOC+='<DIV CLASS="titlepos" ID="title3">菊池さんちの<br>ホームページに<br>ようこそ！</DIV>'
DOC+='<DIV CLASS="titlepos" ID="image1"><IMG SRC="../gif/totoro.gif"></DIV>'
document.write(DOC)
} else {
//DHTML未対応ブラウザ用のメッセ−ジ
var DOC =''
DOC+='<font color=red>'
DOC+='このぺ−ジはDHTMLを解釈できるブラウザ(Netscaoe4 or IE4 以上)でご覧ください'
DOC+='</font><br>'
document.write(DOC)
}
//-->
</SCRIPT>
<NOSCRIPT>
<!--JavaScript未対応、JavaScript設定「無効」ブラウザ用のメッセ−ジ-->
<font color=red>
せっかくご来訪戴きましたが、ご覧のブラウザではこれより先をご案内することが出来ません。
</font><p>
<font color=blue>
（１）Netscape Ver2.0 または MSIE Ver3.0 以上の機能を有するブラウザを入手されるか<br>
（２）上記以上のブラウザをお使いの場合は、JavaScriptの設定を「有効」にして</font><p>
再度ご来訪下さいますようお願いいたします。
</NOSCRIPT>
]]>
|
|
|
