Rico.jsを使うと手軽に移動処理を行うことができます。移動処理を行う命令はRico.Effect.Position()になります。Rico.Effect.Positionの書式は以下のようになります。
Rico.Effect.Position(ID名,X座標,Y座標,ミリ秒,ステップ数)
例えばdivタグに指定されたID名がboxで座標(300,200)に移動させる場合は以下のように使用します。
new Rico.Effect.Position("box", 300,200, 100, 10);
以下のサンプルではボタンをクリックすると、ボックス（黄色い四角い部分）が座標(400,300)に移動します。（サンプルを
実行する）
<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 toPoint()
{
new Rico.Effect.Position("box", 400,300, 100, 20);
}
// --></script>
</head>
<body>
<h1>Rico.js移動処理</h1>
<form>
<input type="button" value="右下へ移動" onClick="toPoint()">
</form>
<div id="box">Rico.jsを使った移動処理サンプル</div>
</body>
</html>
移動させる場合に横方向だけ移動させたい、縦方向だけ移動させたい場合もあります。このような場合には移動させたくない方向の座標値のパラメータはnullを指定します。以下のサンプルではY座標に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 toPoint()
{
new Rico.Effect.Position("box", 400, null, 100, 20);
}
// --></script>
</head>
<body>
<h1>Rico.js移動処理</h1>
<form>
<input type="button" value="右へ移動" onClick="toPoint()">
</form>
<div id="box">Rico.jsを使った移動処理サンプル</div>
</body>
</html>
Ricoは一度に1つしか移動することができないわけではありません。複数のオブジェクトを移動させる場合には移動させるオブジェクトの数だけRico.Effect.Position()を使って列記します。以下のサンプルでは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 toPoint()
{
new Rico.Effect.Position("box1", 400, null, 100, 20);
new Rico.Effect.Position("box2", null, 300, 100, 40);
}
// --></script>
</head>
<body>
<h1>Rico.js移動処理</h1>
<form>
<input type="button" value="個別に移動" onClick="toPoint()">
</form>
<div id="box1">Rico.jsを使った移動処理サンプル(1)</div>
<div id="box2">Rico.jsを使った移動処理サンプル(2)</div>
</body>
</html>
[
Rico.jsを使ったサイズ変更処理]
[
目次へ]
(2006.2.19)