ホームページ > ウェブフロントエンド > htmlチュートリアル > opacity_html/css_WEB-ITnose についての考え

opacity_html/css_WEB-ITnose についての考え

WBOY
リリース: 2016-06-24 11:57:04
オリジナル
982 人が閲覧しました

今日、画像カルーセル プラグインをパッケージ化するときに、不透明度についてこの小さな考えを思いつきました。

このカルーセルの私のアイデアは、外側のコンテナーのオーバーフローを非表示に設定し、位置を相対に設定し、setInterval を使用してサイクルタイムを定義し、コンテナーの高さに応じて上部の値を変更する、以前の Baidu 入力判定ネットワークではありません。絵。

代わりに、不透明度を使用して、対応する画像の表示を切り替えます。

まずこの不透明度の互換性の問題について話しましょう

CSS コード

    filter:alpha(opacity=60);
  1. -moz-opacity:0.6 ;
  2. 不透明度: 0.6

カルーセルを設計するときに、インデックス (右隅または左隅のコーナー マーク、クリックして切り替えるか、マウスを動かして切り替えるかについては、設計者が設計します) をレンダリングする必要があることはわかっています。対応関係は満たされています -- --カルーセルが切り替わるたびに 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 つしかないのと似ています。すべてがレンダリングされていますか?あるいは母体の輪郭や肉感を増すためにスクリプトが操作・制御するだけです。 。 。 。 。 。 。

互換性のある写真を投稿してください:

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート