書式
new Rico.Effect.SizeAndPosition(element, x, y, w, h, duration, steps, options)
element : ページ上のエレメント
x : X座標
y : Y座標
w : リサイズ後の横幅
h : リサイズ後の縦幅
duration : フェード時間(ミリ秒)
steps : フェードのステップ
options : オプション【省略可能】
説明
位置とサイズを同時に指定するにはRico.Effect.FadeTo()を使います。パラメータには処理するページ上のエレメント、X,Y座標、横幅と縦幅、処理にかかる時間、処理のステップを指定します。オプションにはcompleteで完了時の処理を指定することができます。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</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 setSizePos(w, h){
var x = Math.random() * 320;
var y = Math.random() * 100 + 50;
new Rico.Effect.SizeAndPosition("box", x, y, w, h, 100, 10,
{ complete:function(){ alert("移動&リサイズ完了"); } }
);
}
// --></script>
</head>
<body>
<h1>リサイズ&移動処理</h1>
<form>
<input type="button" value="(30,120)にリサイズして移動" onClick="setSizePos(30,120)">
<input type="button" value="(100, 50)にリサイズして移動" onClick="setSizePos(100, 50)">
<input type="button" value="(320,240)にリサイズして移動" onClick="setSizePos(320,240)">
</form>
<div id="box">Ricoサンプル</div>
</body>
</html>