Rico.jsを使うと手軽に移動処理とサイズ変更処理を同時に行うことができます。サイズ変更と移動処理を同時に行う命令はRico.Effect.SizeAndPosition()になります。Rico.Effect.Sizeの書式は以下のようになります。
Rico.Effect.SizeAndPosition(ID名,X座標,Y座標,横幅,縦幅,ミリ秒,ステップ数)
例えばdivタグに指定されたID名がboxでX座標を200、Y座標を100、横幅を480、縦幅を360にする場合は以下のように使用します。
new Rico.Effect.SizeAndPosition("box", 200,100,480,360, 100, 10);
以下のサンプルではボタンをクリックすると、ボックス（黄色い四角い部分）の位置が(300,200)、サイズが横幅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.SizeAndPosition("box", 300,200,480,360, 100, 30);
}
// --></script>
</head>
<body>
<h1>Rico.jsリサイズ＆移動処理</h1>
<form>
<input type="button" value="480,360サイズに拡大し座標(300,20)に移動する" onClick="setSize()">
</form>
<div id="box">Rico.jsを使ったリサイズ＆移動処理サンプル</div>
</body>
</html>
特定の幅や位置を変更したくない場合もあります。このような場合には変更したくないパラメータはnullを指定します。以下のサンプルではY座標と縦幅にnullを指定しているためX座標と横幅のみ変更されます。（実際のサンプルを
実行する）
<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 resizePosition()
{
new Rico.Effect.SizeAndPosition("box", 300,null,null,360, 100, 30);
}
// --></script>
</head>
<body>
<h1>Rico.jsリサイズ＆移動処理</h1>
<form>
<input type="button" value="横幅を480に拡大しX座標300に移動する" onClick="resizePosition()">
</form>
<div id="box">Rico.jsを使ったリサイズ＆移動処理サンプル</div>
</body>
</html>
Ricoは複数のサイズ変更処理を行うことができます。複数のオブジェクトを移動させる場合には移動させるオブジェクトの数だけRico.Effect.SizeAndPosition()を使って列記します。
[
Rico.jsを使って角丸四角形にする]
[
目次へ]
(2006.2.19)