網頁特效制作講解:全屏的半透明遮罩層

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 網頁特效制作講解:全屏的半透明遮罩層

網頁特效制作講解:全屏的半透明遮罩層

編輯：關於JavaScript

前不久有個正要畢業的網友給我發郵件，他畢業設計需要實現鎖屏的效果，但是他沒有能看懂我之前發布的對話框源碼，他問能不能把鎖屏相關代碼說明下，我當時說過兩天就發。由於最近比較忙，我現在才想起來，但願現在此文還來得及。

步入正題：

現在全屏的半透明遮罩層在web2.0網站應用非常廣泛了，絕大多數遮罩是通過計算頁面大小，然後覆蓋一個與頁面同等大小的層實現，如騰訊qzone， wordpress後台。這種方式本來無可非議，但是在頁面很長的時候在IE8下會失效（國外資料的解釋是與機器顯卡相關），有些完美情節的同學遇到這個問題後就抓破了頭，無奈之下甚至想讓IE8強制使用IE7的方式解析他的作品。其實我們有一個更好的方法，咱們用CSS去解決它！

還記得“position:fixed”嗎？它是css2的一個新增的屬性，他可以讓一個元素靜止在頁面上，拖動滾動條也不會動，如Qzone頂部固定的導航欄就是這樣實現的。同樣我們也可以用一個100%高寬的層覆蓋浏覽器視口，這樣就可以實現全屏遮罩了，不用再計算頁面的大小，調整浏覽器大小的時候也不要去動態修改尺寸了。

以下為引用的內容：

可是有一個頭疼的問題，IE6不支持“position:fixed”，咱們只能通過js動態的修改它的TOP值以模擬靜止定位，拖動滾動條的時候遮罩成肯定會抖動，因為每改變一次IE會重新渲染一次。但是微軟卻給我們提供了一個非常有趣的特性，如果給html或者body標簽設置一個靜止定位的背景圖片，層在拖動滾動條的時候就不會抖動了，幾乎完美的模擬了“position:fixed”。我在實際項目中發現這個特性他還能觸發其他的特異功能，以後再說明。

為了省事，咱們針對IE6用萬惡expression在CSS中寫點腳本，拖動滾動條的時候重新定位我們的遮罩層。傳說中expression是非常耗性能的，可是咱們的expression幾乎沒有損耗，有興趣的同學可以深入研究下expression。

以下為引用的內容：

好了，兼容IE6這個大頭娃娃後，咱們的鎖屏遮罩已經通殺主流浏覽器了，但是呢用js寫效果的同學們總是非常的蛋疼，總想折騰點什麼來，咱們就再添加一點腳本，讓鎖屏的時候後可以中斷用戶操作，把滾動條、滾輪、tab鍵、全選、刷新、右鍵統統禁止掉，模擬真正的‘鎖屏’：

以下為引用的內容：

<!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; charset=utf-8" />
<title>lock page</title>
<meta name="author" content="www.planeart.cn" />
<style>
#pageOverlay { visibility:hidden; position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; }
/*IE6 fixed*/
* html { background:url(*) fixed; }
* html body { margin:0; height:100%; }
* html #pageOverlay { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
</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 bind = function (obj, type, fn) {
if (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) {
if (obj.detachEvent) {
   try {
    obj.detachEvent('on' + type, obj[type + fn]);
    obj[type + fn] = null;
   } catch(_) {};
} else {
   obj.removeEventListener(type, fn, false);
};
};

// 阻止浏覽器默認行為
var stopDefault = function(e){
e.preventDefault ? 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){
    var e = evt || window.event;
    stopDefault(e);
    scroll(left, top);
   };
   each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {
     bind(document, o, lock.mouse);
   });
   // 屏蔽特定按鍵: F5, Ctrl + R, Ctrl + A, Tab, Up, Down
   this.key = function(evt){
    var e = evt || window.event,
     key = e.keyCode;
    if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 9) || (key == 38) || (key == 40)) {
     try{
      e.keyCode = 0;
     }catch(_){};
     stopDefault(e);
    };
   };
   bind(document, 'keydown', lock.key);
},
close: function(){
   $('pageOverlay').style.visibility = 'hidden';
   each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {
    unbind(document, o, lock.mouse);
   });
   unbind(document, 'keydown', lock.key);
}
};
bind(window, 'load', function(){
$('btn_lock').onclick = function(){
   lock.show();
};
$('pageOverlay').onclick = function(){
   lock.close();
};
});
})();
</script>
</head>
<body>
<button id="btn_lock" style="position: absolute; left:50%; top: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>
</ol>
<div id="pageOverlay"></div>
</body>
</html>

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

上一頁:JS教程:window.location用法區別
下一頁:前端開發者使用JS框架的三個等級

關於JavaScript

網頁圖片居中:商品圖片的自適應居中的方法: 前幾天在做騰訊微博的微賣場的時候，遇到需要做圖片居中的需求。也就是說，商品列表中的圖片需要居中顯示。
javascript實現網頁跳轉的方法: 昨天練習的時候正好要用到跳轉代碼,在網上找了一下,覺得下面幾個不錯...整理了一下發上來...第一種
js下通過getList函數實現分頁效果的代碼: 用js實現頁面的分頁：復制代碼代碼如下: <table border=0 cellpadd

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章