bytefxでリサイズ（サイズ変更処理）処理を行うにはbytefx.size()を使います。bytefx.sizeの書式は以下のようになります。
bytefx.size(対象オブジェクト, {w:横幅, h:縦幅}, 速度, 終了時コールバック処理)
対象オブジェクトはdocument.getElementById()などで指定します。リサイズ後の幅はピクセル値で{w:値, h:値}のようにプロパティリストの形で指定します。速度は値が小さいほどゆっくり、大きいほど素早く移動します。また、bytefx.sizeは終了幅に近づくとゆっくりと減速します（リニアに移動せずイーズアウトする）。
以下のサンプルではボタンをクリックすると赤いボックスが指定した幅になります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>bytefx : サイズを指定する</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="bytefx_OS.js"></script>
<script type="text/javascript"><!--
function resizeBox(objW, objH)
{
bytefx.size(document.getElementById("box"), {w:objW, h:objH}, 10);
}
// --></script>
</head>
<body>
<h1>bytefx : サイズを指定する</h1>
<form>
<input type="button" value="(200,150)にリサイズ" onClick="resizeBox(200, 150)">
<input type="button" value="(100,300)にリサイズ" onClick="resizeBox(100, 300)">
</form>
<div id="box">bytefx : を使ったリサイズサンプル</div>
</body>
</html>
リサイズ処理が終了した時に処理を実行させることもできます。この場合、終了時の処理は4番目のパラメータに実行する処理を指定します。以下のサンプルでは移動終了後にmsg関数を呼び出すようにしています。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>bytefx : サイズを指定する</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="bytefx_OS.js"></script>
<script type="text/javascript"><!--
function resizeBox(objW, objH)
{
bytefx.size(document.getElementById("box"), {w:objW, h:objH}, 10,
msg);
}
function msg()
{
alert("リサイズ完了");
}
// --></script>
</head>
<body>
<h1>bytefx : サイズを指定する(2)</h1>
<form>
<input type="button" value="(200,150)にリサイズ" onClick="resizeBox(200, 150)">
<input type="button" value="(100,300)にリサイズ" onClick="resizeBox(100, 300)">
</form>
<div id="box">bytefx : を使ったリサイズサンプル</div>
</body>
</html>
[
エフェクトの目次へ]
[
「Ajaxを勉強しよう」の目次へ]
(2006.10.7)