【ハウツー】ゼロからはじめるInnerFade - Web画像もテキストも簡単フェードイン/アウト (4) オプションを指定する | パソコン

【ハウツー】

ゼロからはじめるInnerFade - Web画像もテキストも簡単フェードイン/アウト

4 オプションを指定する

古籏一浩　 [2007/11/30]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- ／4

InnerFadeには以下に示すオプションが用意されています。

animationtype	アニメーションの種類(fade、slide)
speed	フェードにかかる時間(ミリ秒、slow、fast、normal)
timeout	フェードするまでの時間(ミリ秒)
type	種類(sequenceまたはrandom)
containerheight	表示領域の高さ(デフォルトでは自動)
runningclass	フェード領域のスタイルシート(デフォルトではinnerfade)

オプションはinnerfade()の最初のパラメータに{ 名前 : 値 }の形式で指定します。複数のオプションを指定する場合には,(カンマ)で区切って列記します。サンプル04ではanimationtypeをslide、speedをslow(ゆっくり)、timeoutを4秒に設定しています。


サンプル04の実行結果	画像が上下にスライドする感じで次の画像に切り替わる。画像は4秒間表示される

サンプル04

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>InnerFadeサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.innerfade.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                $("#album").innerfade( {
                    animationtype : "slide",
                    speed : "slow",
                    timeout : 4000
                });
            });
        // --></script>
    </head>
    <body>
    <h1>InnerFadeサンプル</h1>
        <ul id="album">
            <li><img src="photo/001.jpg" width="192" height="108" alt="富士山"></li>
            <li><img src="photo/002.jpg" width="192" height="108" alt="夕焼け"></li>
            <li><img src="photo/003.jpg" width="192" height="108" alt="富山湾"></li>
            <li><img src="photo/004.jpg" width="192" height="108" alt="白糸の滝"></li>
        </div>
    </body>
</html>

サンプル05ではtypeにrandomを指定しているため表示される画像の順番はランダムに表示されます。また、表示領域の高さを300ピクセルとし、スタイルシートにphotoAreaを適用するようにしています。


サンプル05の実行結果	ランダムに画像が表示される

サンプル05

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>InnerFadeサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.innerfade.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                $("#album").innerfade( {
                    type : "random",
                    runningclass:"photoArea",
                    containerheight : 300
                });
            });
        // --></script>
    </head>
    <body>
    <h1>InnerFadeサンプル</h1>
        <ul id="album">
            <li><img src="photo/001.jpg" width="192" height="108" alt="富士山"></li>
            <li><img src="photo/002.jpg" width="192" height="108" alt="夕焼け"></li>
            <li><img src="photo/003.jpg" width="192" height="108" alt="富山湾"></li>
            <li><img src="photo/004.jpg" width="192" height="108" alt="白糸の滝"></li>
        </div>
    </body>
</html>