便利eelife Java Script

   戻る


テーブルをスライドします。
テーブル@ テーブルA テーブルB テーブルC テーブルD



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY onload="suraido()">
<TABLE id="xypos" style="width : 600px;height : 100px;position : absolute;top : 20px;left : 300px;">
<TBODY>
<TR>
<TD width="100"></TD>
<TD width="100" bgcolor="#cc00cc">テーブル@</TD>
<TD width="100" bgcolor="#ffff00">テーブルA</TD>
<TD width="100" bgcolor="#00ff00">テーブルB</TD>
<TD width="100" bgcolor="#ff8080">テーブルC</TD>
<TD width="100" bgcolor="#7777ff">テーブルD</TD>
</TR>
</TBODY>
</TABLE>
<INPUT type="button" name="botan2" value="スライド" onclick="suraido()">
</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
T_x = 100;     // X座標の初期値 テーブルの左からの位置
T_w=100;      // 各セルの幅
C_l = 0;        // クリップの左の幅の初期値
i=0;             // テーブルの移動変数
M_x=0;         // X座標 テーブルの左からの位置の変数
seru_suu=6;   // セルの数この場合は6
v=1;            // セルの移動変数

function suraido(){
if(i<=v*T_w){
M_x = T_x-i;
C_w=T_w+i;
C_l=i;
i++;
C_Top = 0;          // クリップの左上の位置
C_Height = 100;   // クリップの左下の位置
C_Width= C_w;     // クリップの右までの幅
C_Left = C_l;        // クリップの左の幅
document.getElementById("xypos").style.left = M_x;
C_list ="rect("+ C_Top +"px,"+ C_Width +"px,"+ C_Height +"px,"+ C_Left +"px)";
document.getElementById("xypos").style.clip = C_list;  // クリップの表示
setTimeout("suraido()",10);
}
else{v++;
if(v==seru_suu){
v=1;i=0;
}
}
}

// -->
</SCRIPT>
コメント
クリップに ついて