スライド処理を行う

書式

efObj = new Spry.Effect.Blind(element, {
from: percent,
to: percent,
duration: msec,
fps : frameRate,
toggle: flag1,
horizontal : flag2,
setup : startFunc,
finish:endFunc
})

efObj : エフェクトオブジェクト
element : エレメントID
percent : 割合 (0%〜100%) またはサイズ
msec : エフェクト処理時間 (ミリ秒)
frameRate : フレームレート
flag1 : トグルスイッチ (trueで交互に切替え、falseで切替えなし)
flag2 : 水平方向にスライドさせるかどうかのフラグ (true : 水平方向、false : 垂直方向)
setup : エフェクト処理前の処理
finish : エフェクト完了時の処理

説明

スライド処理を行うにはSpry.Effect.Slide()を使います。最初のパラメータには対象となるエレメントのIDを指定します。2番目のパラメータは省略可能で、エフェクトに関する各種処理を指定します。以下の表にあるプロパティ値が設定できます。2番目のパラメータで指定できるプロパティ値は、いずれも省略することができます。エフェクトを実行するにはnew Spry.Effect.Slide()で生成されたオブジェクトのstart()メソッドを呼び出します。

プロパティ名内容
from開始時の表示割合またはサイズ
to終了時の表示割合またはサイズ
duration処理にかかる時間
toggleトグルスイッチ
horizontalスライド方向を示すフラグ (true : 水平方向、false : 垂直方向)
setupエフェクト処理前の処理
finishエフェクト完了時の処理

逆引きAdobe Spryリファレンス

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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 src="js/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function() {
efObj = new Spry.Effect.Slide("result", {
duration: 400,
from: "100%", to: "10%",
horizontal : false,
toggle: true
});
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル!</h1>
<form>
<input type="button" value="エフェクト開始" onClick="efObj.start()">
</form>
<div id="result">
<div>
Adobe Spry Sample<br>
ボタンがクリックされるたびにエフェクト処理されます。
</div>
</div>
</body>
</html>