欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

lightBox 簡易的全屏透明遮罩解決方法

 更新時間:2010年06月04日 16:14:20   作者:  
現在全屏的半透明遮罩層在web2.0網站應用非常廣泛了,絕大多數遮罩是通過計算頁面大小,然后覆蓋一個與頁面同等大小的層實現,如騰訊qzone, wordpress后臺。
步入正題:
現在全屏的半透明遮罩層在web2.0網站應用非常廣泛了,絕大多數遮罩是通過計算頁面大小,然后覆蓋一個與頁面同等大小的層實現,如騰訊qzone, wordpress后臺。這種方式本來無可非議,但是在頁面很長的時候在IE8下會失效(國外資料的解釋是與機器顯卡相關),有些完美情節(jié)的同學遇到這個問題后就抓破了頭,無奈之下甚至想讓IE8強制使用IE7的方式解析他的作品。其實我們有一個更好的方法,咱們用CSS去解決它!
還記得“position:fixed”嗎?它是css2的一個新增的屬性,他可以讓一個元素靜止在頁面上,拖動滾動條也不會動,如Qzone頂部固定的導航欄就是這樣實現的。同樣我們也可以用一個100%高寬的層覆蓋瀏覽器視口,這樣就可以實現全屏遮罩了。不用再計算頁面的大小,調整瀏覽器大小的時候也不要去動態(tài)修改尺寸了。

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

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

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

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

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

相關文章

  • 利用JavaScript在網頁實現八數碼啟發(fā)式A*算法動畫效果

    利用JavaScript在網頁實現八數碼啟發(fā)式A*算法動畫效果

    這篇文章主要介紹了利用JavaScript在網頁實現八數碼啟發(fā)式A*算法動畫效果,需要的朋友可以參考下
    2017-04-04
  • 基于webpack.config.js 參數詳解

    基于webpack.config.js 參數詳解

    下面小編就為大家分享一篇基于webpack.config.js 參數詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • electron實現qq快捷登錄的方法示例

    electron實現qq快捷登錄的方法示例

    這篇文章主要介紹了electron實現qq快捷登錄的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • js 數值轉換為3位逗號分隔的示例代碼

    js 數值轉換為3位逗號分隔的示例代碼

    本篇文章主要是對js將數值轉換為3位逗號分隔的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02
  • Js檢查變量類型的代碼()

    Js檢查變量類型的代碼()

    本文章為你提供一款js 返回變量的類型代碼哦,如果你不懂得如何獲取js變量的類型的話,看看我們下面的代碼你就知道如何獲取js變量的代碼哦。
    2010-07-07
  • uni-app網絡請求、數據緩存實例詳解

    uni-app網絡請求、數據緩存實例詳解

    這篇文章主要介紹了uni-app網絡請求、數據緩存的相關知識,本文通過實例代碼給大家講解的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-11-11
  • JS?限時限次數點擊按鈕的實現思路

    JS?限時限次數點擊按鈕的實現思路

    這篇文章主要介紹了JS?限時限次數點擊按鈕,實現方法很簡單需要用一個變量作為計數,點擊一次,計數加一點擊函數內判斷計數變量設置定時恢復,對實例代碼感興趣的朋友一起看看吧
    2022-03-03
  • js彈性勢能動畫之拋物線運動實例詳解

    js彈性勢能動畫之拋物線運動實例詳解

    這篇文章主要為大家詳細介紹了js彈性勢能動畫之拋物線運動的制作方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • 使用javascript實現json數據以csv格式下載

    使用javascript實現json數據以csv格式下載

    這篇文章主要介紹了使用javascript實現json數據以csv格式下載,需要的朋友可以參考下
    2015-01-01
  • js實現驗證碼功能

    js實現驗證碼功能

    這篇文章主要為大家詳細介紹了js實現驗證碼功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-07-07

最新評論