DHTMLスライドショープログラム(1)
著者：Eve Cole
更新時間：2009-06-20 17:00:35
これはスライドショープログラムであり、画像を順番に再生するプログラムです。一部のサイトではこの形式の広告再生バーが見られますが、そのほとんどは CGI で作成されており、サーバーが ASP、PHP、Perl などの CGI プログラムをサポートしている必要があります。ただし、ここでの実装方法は CGI を必要とせず、CSS 効果と JavaScript コントロールのみを使用します。ブラウザが IE 4.0 以降または Netscape 3.0 以降である限り。ここでは IE でのみ表示できる CSS フィルター効果を使用しているだけです。 CSS のフィルター効果については、Yesky.com で公開されている私の「CSS のフィルターの詳細な説明」を参照してください。
さて、準備をしましょう。
まず、この効果を作成するには、同じサイズの写真をいくつか作成し、順番に再生する必要があります。例えば、使用した画像として以下の88×31の写真が3枚見つかりました。
次に、CSS の Filter の画像変換フィルターの知識を復習しましょう。
CSSで変換フィルターを表示する
表示変換フィルタは、フェードインおよびフェードアウト効果のみを提供するハイブリッド変換フィルタとは異なり、より多様な変換効果を提供します。その構文は次のとおりです。
フィルター: RevealTrans (期間 = 変換する秒数、トランジション = 変換タイプ)
ご覧のとおり、これには 24 種類の変換タイプのパラメータがあり、変換タイプのコード名を指定するだけで、独自の変換効果に従って画像を変換できます。次の表に、24 の変換フィルタの形式とそれに対応するコードを示します。
| 変換フィルタの変換形式 | に | 対応したコード | を表示 |
| 長方形を大から小へ | 0 | 長方形を小から大へランダムに分解 | 1 |
円を| 大から小 |
| へ | 縦 | 方向に分割 | 13 |
| 2 | 垂直 外側に分割 | 14 |
| ラウンド 小から大 | 3 | 水平内側に分割 | 15 |
| 上に押す | 4 | 水平外側に分割 | 16 |
| 下に押す | 5 | 左下に剥がす | 17 |
| 右に押す | 6 | 左上に剥がす | 18 |
| 左に押す 開く | 7 | 右に下に剥がす | 19 |
| 縦型ブラインド | 8 | 剥がす上下左右 | 20 |
| 水平ブラインド | 9 | ランダムな水平細線 | 21 |
| 水平チェッカーボード | 10 | ランダムな垂直細線 | 22 |
| 垂直チェッカーボード | 11 | 特殊効果をランダムに選択 | 23 |
