亚洲综合av一区二区三区,国语对白做受xxxx,在线亚洲精品无码中文字幕

　簡易的全屏透明遮罩(lightBox)

作者：tangbin1987　時間： 2010-06-09　文檔類型：原創(chuàng)　來自：藍色理想

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

步入正題：

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

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

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

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

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

運行代碼框
<!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>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

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

經(jīng)典論壇交流：http://bbs.blueidea.com/thread-2986037-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2010/7665.asp　

出處：藍色理想
責任編輯：bluehearts

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。

相關文章

更多相關鏈接

全面兼容ie,ff的CSS HACK寫法

{ hide_text } CSS文字隱藏總結(jié)報告

如何使CSS渲染更高效

css reset中的list-style:none

說說CSS Hack 和向后兼容

作者文章

javascript對話框(彈出層)組件


關鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設計比賽網(wǎng)頁制作 web標準用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設計大賽開啟

國際體驗設計大會7月將在京舉行

中國國防科技信息中心標志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻，送禮標配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx