基本原則
これらの動的なスライディング ボックスは、同じ基本原理に基づいています。 「.boxgrid」を含む DIV タグは、「覗き見」するオブジェクト内の他の 2 つの項目を渡した後、ウィンドウとして機能します。よくわかりませんか? この写真がヒントになります:
この基本原理を理解した後、スライド要素のアニメーション効果を使用して、表示される領域を露出または覆い、スライド効果を作成できます。
クリックして効果をプレビューします この例のソース ファイルをダウンロードする
ステップ 1 – CSS の基本
基本的な構造を示す上記のインスピレーション図では、目的の効果を表示するために少し CSS を使用する必要があります。次の CSS は、表示ウィンドウ (.boxgrid) を定義し、画像のデフォルトの POSITION を LEFT と TOP に設定します。これは、スライド時に説明を重ねるために非常に重要です。そして、overflow:hidden がこれを可能にすることを忘れないでください。
.boxgrid{
幅: 325ピクセル;
高さ: 260ピクセル;
マージン:10px;
フロート:左;
背景:#161613;
境界線: 実線 2px #8399AF;
オーバーフロー: 非表示;
位置: 相対的;
}
.boxgrid img{
位置: 絶対;
トップ: 0;
左: 0;
境界線: 0;
}
CSS を使用して半透明の説明を実現する準備ができていない場合は、2 番目のステップに直接ジャンプできます。
.boxcaption{
フロート: 左;
位置: 絶対;
背景: #000;
高さ: 100ピクセル;
幅: 100%;
不透明度: 0.8;
/* IE 5 ～ 7 の場合 */
フィルター: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* IE 8 の場合 */
-MS フィルター: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
ここで、キャプション ボックスのデフォルトの開始点を設定する必要があります (ボックスよりもレイヤーの方が優れていると思います)。初期化時に完全に非表示にしたい場合は、TOP と LEFT をウィンドウ (.boxgrid) の高さと幅に設定する必要があります。これは (もちろん) スライドする方向によって決まります。この (CSS 定義) .caption および .boxcaption で指定されるように、初期化時にその一部のみを表示するようにすることもできます。
.captionfull .boxcaption {
トップ: 260;
左: 0;
}
.caption .boxcaption {
トップ: 220;
左: 0;
}
出典:幸せなお気に入り