今日、画像カルーセル プラグインをパッケージ化するときに、不透明度についてこの小さな考えを思いつきました。
このカルーセルの私のアイデアは、外側のコンテナーのオーバーフローを非表示に設定し、位置を相対に設定し、setInterval を使用してサイクルタイムを定義し、コンテナーの高さに応じて上部の値を変更する、以前の Baidu 入力判定ネットワークではありません。絵。
代わりに、不透明度を使用して、対応する画像の表示を切り替えます。
まずこの不透明度の互換性の問題について話しましょう
CSS コード
カルーセルを設計するときに、インデックス (右隅または左隅のコーナー マーク、クリックして切り替えるか、マウスを動かして切り替えるかについては、設計者が設計します) をレンダリングする必要があることはわかっています。対応関係は満たされています -- --カルーセルが切り替わるたびに cur のインデックスを比較してOKです (
個人的には、クリックまたはマウスを移動した後に計算を再開するために、clearTimeout を与えることをお勧めします )
1. w3c ドキュメントを参照したことがある場合は、ご存知のとおり (IE のみ)、
filter 属性
を使用すると、テキストと画像にスタイル効果を追加できます (追記: filter 属性を使用する場合は注意してください) 、常に要素の幅を指定してください )
以前に他の人が ie6 と ie7 の設定について書いています 不透明度が指定されている場合、この要素は「レイアウト」でなければなりません (幅が設定され、位置が厳密に追加されることを意味します)
2. -moz-opacity: この属性は、Mozilla の初期バージョンとの互換性を保つためのものです。 FF0.9ではこの属性を使用する必要がなくなったと言われています。私の ff
3.6.23 は opacity 属性を直接表示しました
3。この -khtml-opacity 属性を考える人もいるかもしれませんが、Safari 1.x では必要であると言われているため、ここでは追加しませんでした。互換性がある場合に追加されます。
不透明度の簡単な紹介
プラグインは完成しましたが、問題が残っています。多くの人がプラグインをカプセル化すると、ページに DOM マトリックスが 1 つしかないのと似ています。すべてがレンダリングされていますか?あるいは母体の輪郭や肉感を増すためにスクリプトが操作・制御するだけです。 。 。 。 。 。 。
互換性のある写真を投稿してください: