由於最近的專案用到彈出浮層來顯示資訊或者獲得使用者輸入，這樣的好處是僅僅只用乙個頁面就可以實現多個頁面的功能，不用多寫或者多跳轉幾個頁面，所以就簡單研究了一下浮層實現的一種原理，並記錄下以後就可以自己寫自己應用了。
先介紹一下其實現的原理吧：在css裡有乙個屬性叫做z-index，表示每個元素之間的堆疊關係，其值越大，就越在頂層，而其值越小則越在底層。所以假設我們現在的頁面的z-index值為1，然後我們載入乙個和當前頁面大小寬高完全相同而且有一定透明度的div命名為fullscreen，其z-index值姑且設定為9999，這樣一來fullscreen就霸佔在整個頁面的最頂層，下面的頁面就無法點選或者任何其他操作，但是fullscreen是有透明度的，所以底下的頁面是可見的。隨後我們再載入乙個z-index為10000的div命名為floatlayer，這樣floatlayer又會顯示在fullscreen的上方，從而產生浮動的效果。
接下來看看實現過程，首先是隨便寫乙個簡單的頁面，分別設定body和a的樣式如下所示：
點選「出現浮層」後，body部分首先載入乙個z-index為9999的div(fullscreen)，其透明度0.7，背景黑色：
注意這個時候fullscreen已經霸佔到螢幕的最頂層了，只不過由於透明度所以你才能看到之前的頁面
隨後再載入乙個z-index為10000的div(floatlayer)，背景白色，由於10000比9999還要大，所以此時floatlayer霸佔了最高點，但是其大小比較小，所以我們還可以看見fullscreen。注意floatlayer和fullscreen為同胞關係，若是寫成父子關係則會導致floatlayer也繼承透明屬性，不好調節。
最後點選隱藏就把fullscreen和floatlayer全部remove掉即可，如圖背景又變成了銀色：
簡要**如下：
doctype html>
<
html
>
<
head
>
<
script
src="../jquery-3.1.0.min.js"
>
script
>
<
title
>浮層的簡單原理
title
>
<
style
>
/*body初始狀態,清間距,設定背景
*/body
/*超連結的樣式:藍色按鈕*/a
/*人為製造乙個佔據整個螢幕的div,其透明度為0.7且z-index為9999使之前的頁面被壓在底層無法點選
*/#fullscreen
/*浮層,可隨意設定大小寬高，但是z-index必須比上面fullscreen大才能顯示出來
*/#floatlayer
style
>
head
>
<
body
>
<
a href
="#"
id="show"
>出現浮層
a>
body
>
html
>
<
script
>$("
document
").ready(
function
() );
});});
script
>
使用 textview實現文字的陰影效果，浮雕效果
1.android shadowcolor 陰影的顏色 2.android shadowdx 水平方向上的偏移量 3.android shadowdy 垂直方向上的偏移量 4.android shadowradius 是陰影的的半徑大少 5.使用 textview的4個屬性來實現 android s...
Html實現簡單彈窗展示UI效果
在今天的專案中，實現了乙個很 神 的需求。要在unity打出的webgl中做乙個c 編輯器的功能，要求像vs那樣可以呼叫控制台除錯 我思來想去，感覺這個功能也只能模擬了，怎麼可能能實現這樣的功能。於是我在網上查詢資料，發現網上有很多線上c 除錯 於是我想可不可以用unity打出的html上展示這些c...
彈窗層效果的實現（非jQuery實現）
要想實現彈窗的效果，首先應該建立乙個覆蓋層masklayer，以及乙個顯示層presentlayer。其次，每次彈窗時 除首次彈窗外 masklayer的顯示以及隱藏不應該導致文件流的reflow，但是repaint不可避免。所以對於masklayer，用以display absolute 最為關鍵...