|
|
|
11/22(Fri) 04:00
 スライドイン・アウト
HTML文や画像レイヤーにマウスをのせると、画面からスライドイン・アウト表示します。
■設置方法
| 使用するCross-Browser function | slideXaxis |
| スタイルシート | ipos (JavaScript組み込み) |
■ヘッダー部に以下の関数を定義します。
変更する箇所は以下の２カ所です。あなたのページレイアウトに合わせて変更して下さい。
- xLimit = -375; はhtml文のサイズや画像データサイズより30px位(サンプルでは25px)大きく(数値は小さくなります)設定します。30px分のデータが画面に表示されます。
- スタイルシート内の top:120 は上端からの表示位置、width:400 はhtml文のサイズ、background-color:cyan; (IE) layer-background-color:cyan; (NC) は背景色になります。
|
<![CDATA[
<script language=javascript>
<!--
/*--------------------------------------------------------------------
Dynamic HTML cross-browser for NC and IE (2000.05)
by「菊池さん」<http://kikuchisan.net/>
--------------------------------------------------------------------*/
function slideXaxis(layName,x){ //レイヤ−X軸移動
if(document.all) document.all(layName).style.pixelLeft=x //IE4,5,6,Opera6用
if(document.getElementById) document.getElementById(layName).style.left=x //NN6,7用
if(document.layers) document.layers[layName].left=x //NN4用
}
var timeIDin, timeIDout;
var xLimit = -375; //左端座標初期値
var xStep = 50; //移動量
var xAxis = xLimit;
if(document.all || document.getElementById || document.layers){ //スタイル定義
document.write('<style type="text/css">\n');
document.write('a {text-decoration:none; }\n');
document.write('#ipos { position:absolute; top:120px; left:'
+xLimit+'px; background-color:cyan; layer-background-color:cyan; width:400 }\n');
document.write('</style>\n');
}
function slideIn(){
clearTimeout(timeIDout);
if(xAxis < 0){
xAxis += xStep; if(xAxis > 0) xAxis = 0;
slideXaxis("ipos",xAxis)
timeIDin = setTimeout("slideIn()",25);
}
else clearTimeout(timeIDin);
}
function slideOut(){
clearTimeout(timeIDin);
if(xAxis > xLimit){
xAxis -= xStep; if(xAxis < xLimit) xAxis = xLimit;
slideXaxis("ipos",xAxis)
timeIDout = setTimeout("slideOut()",25);
}
else clearTimeout(timeIDout);
}
//-->
</script>
]]>
|
■ボディ部の文末に以下の記述をします。
- 必ず文末に記述してください。(NCでエラーになる場合があります)
- サンプルにはHTML文、画像の両方の記述をしてます。
- （１）HTML文の場合---あなたの表示したいHTML文を記述します。
- （２）画像の場合-----<img>タグで指定します。border=0 指定を忘れずに。
- <a href="javascript:;">の「javascript:;」の代わりにリンク先(../main.htmlなど)を指定すればクリックでリンク先にジャンプします。リンク先を指定しない場合は「javascript:;」のままにします。
|
<![CDATA[
<script language=javascript>
<!--
if(document.all || document.getElementById || document.layers) {
document.write('<div id="ipos" onMouseOver="slideIn()" onMouseOut="slideOut()">\n');
document.write('<layer name="ipos" onMouseOver="slideIn()" onMouseOut="slideOut()">\n');
document.write('<table><tr><td align=center><a href="javascript:;">\n'); //HTML文
document.write('<font color=red><b>菊池さんの工作室</b></font>へ');
document.write('ようこそいらっしゃいました！<br>\n');
document.write('<img src="../gif/bannerex.gif" border=0>\n'); //画像
document.write('</a></td></tr></table></layer></div>\n');
}
// -->
</script>
]]>
|
|
|
