切り替え方法を細かく指定する
サンプル1では特殊ワイプ効果で画像が切り替わりましたが、特に指定しなかったためデフォルトのエフェクトで表示されました。せっかくUIZE Frameworkには多数の特殊ワイプが用意されていますので、今度は好みのエフェクトを設定してみましょう。
エフェクトの種類もset()で設定します。set()の引数に「Uize.Widget.ImageWipe.presets.エフェクト名」の形式で記述します。エフェクト名は2ページ目に示した表中の名前です。たとえば「facetedFade」なら以下のようになります。
Uize.Widget.ImageWipe.presets.facetedFade
実際にエフェクトの種類を変更したのがサンプル2です。いくつもの四角形がフェードインしながら画像が切り替わります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ImageWipeサンプル2</title>
<link rel="stylesheet" href="css/page.content.css"/>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<div id="page_imageWipe" style="position:relative; width:600px; height:338px; border:1px solid #555;"></div>
<script type="text/javascript"><!--
photoNo = 0;
photos = ['photo/1.jpg', 'photo/2.jpg', 'photo/3.jpg'];
Uize.module ({
required:[
'Uize.Widget.Page',
'Uize.Widget.ImageWipe.xPresets'
],
builder:function () {
var page = window.page = new Uize.Widget.Page();
imageWipe = page.addChild ('imageWipe',Uize.Widget.ImageWipe,{built:false});
page.wireUi();
imageWipe.set(Uize.Widget.ImageWipe.presets.facetedFade);
performWipe();
setInterval('performWipe()', 4000);
}
});
function performWipe () {
imageWipe.set({src : photos[photoNo]});
photoNo = (photoNo + 1) % photos.length;
}
// --></script>
</body>
</html>
