シンプルな全画面透明マスク（ライトボックス）

著者：Eve Cole 更新時間：2010-06-09 17:08:28

少し前に、卒業を控えたネットユーザーから、卒業プロジェクトでロック画面効果を実現する必要があるというメールが届きましたが、私が以前に投稿したダイアログボックスのソースコードが理解できなかったので、説明してもらえないかと尋ねられました。ロック画面関連のコードは 2 日以内に投稿すると言いました。最近とても忙しかったので今思い出したのですが、この記事を書くのに遅くないことを願っています。

本題に入ります:

現在、フルスクリーンの半透明マスクレイヤーは、Web2.0 Web サイトで広く使用されています。ほとんどのマスクは、ページサイズを計算し、Tencent qzone や wordpress バックエンドなどのページと同じサイズのレイヤーで覆うことによって実装されます。。この方法は理解できますが、ページが非常に長い場合、IE8 では失敗します (海外情報によると、完璧なプロットを持つ一部の学生は、この問題に遭遇して頭を悩ませました)。、私ですら、IE8 が彼の作品を解析するために IE7 の方法を使用することを強制されることを望んでいます。実はもっと良い方法があるので、 CSS を使って解決してみましょう。

「 position:fixed 」を覚えていますか?これは CSS2 の新しい属性です。たとえば、Qzone の上部にある固定ナビゲーションバーは、この方法で実装されます。同様に、高さと幅が 100% のレイヤーを使用してブラウザのビューポートをカバーすることもできるため、全画面マスキングを実現できます。ページのサイズを計算したり、動的に変更したりする必要はありません。ブラウザのサイズを変更するときのサイズ。

ただし、IE6 は「position:fixed」をサポートしていません。スクロールバーをドラッグすると、IE が変更されるたびにマスクが確実に揺れてしまいます。 -再度レンダリングします。しかし、Microsoft は非常に興味深い機能を提供してくれました。html タグまたは body タグに静的に配置された背景画像を設定すると、スクロールバーがドラッグされてもレイヤーは揺れず、「position:fixed」をほぼ完全にシミュレートします。実際のプロジェクトでは、この機能が他の特殊な機能もトリガーできることがわかりました。これについては後で説明します。

トラブルを避けるために、邪悪な式を使用して IE6 用の CSS でいくつかのスクリプトを記述し、スクロールバーをドラッグするときにマスクレイヤーの位置を変更します。表現はパフォーマンスを非常に重視すると言われていますが、興味のある学生は表現を深く学ぶことができます。

さて、大きな頭の人形 IE6 と互換性を持った後、私たちのロック画面マスクは主流のブラウザーに採用されました。しかし、js を使用してエフェクトを作成する学生は常に非常にイライラしており、常に何かを追加したいと考えています。画面がロックされているときにユーザー操作を中断し、スクロールバー、ホイール、タブキーを無効にし、すべてを選択し、更新し、右クリックして実際の「ロック画面」をシミュレートする小さなスクリプトです。

コードボックスを実行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" /> <title>ロックページ</ title> <meta name="author" content="www.planeart.cn" /> <style> #pageOverlay { 位置: 左: 0; z-index:1987; 100%; 高さ:#000; フィルタ:alpha(不透明度=70); } /*IE6 修正済み*/ * html 本文 { マージン:0; 高さ:100%; } * html #pageOverlay { 位置: 絶対; 左: 式(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); ); } </style> <script> (function(){ // オブジェクトを取得します var $ = function (id){ return document.getElementById(id); }; // var each = function(a, b) をトラバースします{ for (var i = 0, len = a.length; i < len; i++) b(a[i], i) } // イベントバインディング var binding = function (obj, type, fn); obj.attachEvent) { obj['e' + type + fn] = fn; obj[type + fn] = function(){obj['e' + type + fn](window.event);} obj.attachEvent( 'on' + type, obj[type + fn]); } else { obj.addEventListener(type, fn, false) } } // イベントを削除します var unbind = function (obj, type, fn); obj.detachEvent) { try { obj.detachEvent('on' + type, obj[type + fn] = null } catch(_) {} }; , fn, false); }; // ブラウザのデフォルト動作を防止します var stopDefault ? e.preventDefault() : e.returnValue = false };位置 var getPage = function(){ var dd = document.documentElement, db = document.body; return { left: Math.max(dd.scrollLeft, db.scrollLeft), top: Math.max(dd.scrollTop, db. scrollTop) } }; // ロック画面 var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; var p = getPage(), left = p.left, top = p.top; // ページのマウス操作の制限 this.mouse = function(evt) || stopDefault(e); 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {bind(document, o, lock.mouse) }); // 特定のキーをブロックします: F5、Ctrl + R、Ctrl + A、タブ、上、下 this.key = function(evt){ var e = evt || key = e.keyCode if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 38) || (key == 40) { try{ e.keyCode = 0; ){}; stopDefault(e); }; バインド(ドキュメント、'keydown'、lock.key) }、関数(){ $('pageOverlay').style.visibility = 'hidden'; (['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { unbind(document, o, lock.mouse); });キー); } }; バインド(ウィンドウ, 'ロード', function(){ $('btn_lock').onclick = function(){ lock.show(); }; $('pageOverlay').onclick = function( ){ lock.close() }); })(); </script> </head> <body> <button id="btn_lock" style="position: 絶対; left:50%; 40%; ">ロック画面を有効にする</button> <ol id="test"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> li> <li>囧</li> </ol> <div id="pageOverlay"></div> </body> </html>
[Ctrl+A すべて選択ヒント: 最初にコードの一部を変更してから実行を押すことができます]

原文： http://www.planeart.cn/? p=792