この記事では、IE6 と互換性のあるマスク関数を実装するための jQuery を主に紹介し、jQuery マスク レイヤーのレイアウト、スタイル、関数の実装テクニックを詳しく分析します。必要な方はぜひ参考にしてください。
最も合理化された強力な jQuery マスク レイヤー効果。
ブラウザのサイズを変更すると、それに応じてマスクレイヤーのサイズも変更されます。
マスクレイヤーの上のダイアログボックスはスクロールの変化に応じて変化します。つまり、ダイアログボックスがブラウザの中央に表示されます。
HTMLコード
正在加载,请稍后...
CSSコード
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; } #main { height: 1800px; padding-top: 90px; text-align: center; } #fullbg { background-color: Gray; left: 0px; opacity: 0.5; position: absolute; top: 0px; z-index: 3; filter: alpha(opacity=50); /* IE6 */ -moz-opacity: 0.5; /* Mozilla */ -khtml-opacity: 0.5; /* Safari */ } #dialog { background-color: #FFF; border: 1px solid #888; display: none; height: 200px; left: 50%; margin: -100px 0 0 -100px; padding: 12px; position: fixed !important; /* 浮动对话框 */ position: absolute; top: 50%; width: 200px; z-index: 5; } #dialog p { margin: 0 0 12px; } #dialog p.close { text-align: right; }
jqueryコード
ここにjqueryファイルをインポートすることを忘れないでください。
関連する推奨事項:
画像上にマウスを置いたときにマスク効果を実装する JS コードの例
マスクレイヤーの後にページがスクロールしないようにする方法の例
以上がIE6対応のマスキング機能のjQuery実装例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。