jquery、div、css製作遮擋層

jquery、div、css製作遮擋層
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

在日常開發中經常會用到遮擋層,一直沒有機會研究,今天實現了,感覺原理原來如此簡單。不過,這些很小的知識點,必須都弄清楚,真是應了那句老話,基礎好,才能走的遠。

遮擋層效果圖:

遮擋層實現原理:

  修改某個隱藏的div樣式,由隱藏修改為展現,寬度和高度與瀏覽器視窗相等。

注意細節:

   div需要設定z-index,這個屬性,顧名思義,是在z軸上的索引,你可以理解為垂直於螢幕的高度,值越大,元素就會越在前方。z-index要比一般的元素值大。

  z-index只有在元素position:absolute時,才會起作用。所以,元素要設定為postion:absolute;top:0;left:0;

  背景圖片,使用預設的x與y軸重複,即可。

實現程式碼:

 html程式碼

<button onclick="s<span style="font-family: Arial, Helvetica, sans-serif;">click me</button>
<div id="zhedangceng" 
style="display:none;position:absolute;top:0px;left:0px;z-index:10;background-image:url(./indexassets/alphabg.png)"></div>

JavaScript程式碼:

function show(){
$("#zhedangceng").css({
"width":$(document).width(),
"height":$(document).height()
}) 
}
function hide(){
$("#<span style="font-family: Arial, Helvetica, sans-serif;">zhedangceng</span>").hide();
}

遮擋層圖片:

相關文章

程式語言 最新文章