Rico.jsを使うと手軽にサイズ変更処理を行うことができます。サイズ変更処理を行う命令はRico.Effect.Size()になります。Rico.Effect.Sizeの書式は以下のようになります。
Rico.Effect.Size(ID名,横幅,縦幅,ミリ秒,ステップ数)
例えばdivタグに指定されたID名がboxで横幅を480、縦幅を360にする場合は以下のように使用します。
new Rico.Effect.Size("box", 480,360, 100, 10);
以下のサンプルではボタンをクリックすると、ボックス（黄色い四角い部分）のサイズが横幅320、縦幅240ピクセルに拡大されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Rico.jsリサイズ処理</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rico.js"></script>
<script type="text/javascript"><!--
function setSize()
{
new Rico.Effect.Size("box", 320,240, 100, 30);
}
// --></script>
</head>
<body>
<h1>Rico.jsリサイズ処理</h1>
<form>
<input type="button" value="320,240サイズに拡大" onClick="setSize()">
</form>
<div id="box">Rico.jsを使ったリサイズ処理サンプル</div>
</body>
</html>
幅を指定する際に、横幅だけ変更したい、縦幅だけ変更したい場合もあります。このような場合には変更したくないパラメータはnullを指定します。以下のサンプルでは縦幅にnullを指定しているため横幅のみ変更されます。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Rico.jsリサイズ処理</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rico.js"></script>
<script type="text/javascript"><!--
function setSize()
{
new Rico.Effect.Size("box", 320, null, 100, 30);
}
// --></script>
</head>
<body>
<h1>Rico.jsリサイズ処理</h1>
<form>
<input type="button" value="横幅のみ320サイズに拡大" onClick="setSize()">
</form>
<div id="box">Rico.jsを使ったリサイズ処理サンプル</div>
</body>
</html>
Ricoは複数のサイズ変更処理を行うことができます。複数のオブジェクトを移動させる場合には移動させるオブジェクトの数だけRico.Effect.Size()を使って列記します。以下のサンプルでは2つのボックスが、それぞれ異なる速度で、異なるサイズに変更されます。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Rico.jsリサイズ処理</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rico.js"></script>
<script type="text/javascript"><!--
function setSize()
{
new Rico.Effect.Size("box1", null, 360, 100, 20);
new Rico.Effect.Size("box2", 480, null, 100, 40);
}
// --></script>
</head>
<body>
<h1>Rico.jsリサイズ処理</h1>
<form>
<input type="button" value="個別にサイズ変更" onClick="setSize()">
</form>
<div id="box1">Rico.jsを使ったリサイズ処理サンプル(1)</div>
<div id="box2">Rico.jsを使ったリサイズ処理サンプル(2)</div>
</body>
</html>
[
Rico.jsを使ってサイズと移動処理を同時に行う]
[
目次へ]
(2006.2.19)