このページの本文へ

JS超えた!? UIZE Frameworkの特殊効果を見せます! (4/5)

2009年11月13日 14時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

切り替え方法を細かく指定する

 サンプル1では特殊ワイプ効果で画像が切り替わりましたが、特に指定しなかったためデフォルトのエフェクトで表示されました。せっかくUIZE Frameworkには多数の特殊ワイプが用意されていますので、今度は好みのエフェクトを設定してみましょう。

 エフェクトの種類もset()で設定します。set()の引数に「Uize.Widget.ImageWipe.presets.エフェクト名」の形式で記述します。エフェクト名は2ページ目に示した表中の名前です。たとえば「facetedFade」なら以下のようになります。


Uize.Widget.ImageWipe.presets.facetedFade


 実際にエフェクトの種類を変更したのがサンプル2です。いくつもの四角形がフェードインしながら画像が切り替わります。

●サンプル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>


この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く