半透明遮罩效果 DIV

阿新 • • 發佈：2019-01-31

1、用JS判斷你的顯示器解析度：
var iWidth = window.screen.availWidth;
var iHeight = window.screen.availHeight;
，獲取長與寬兩個引數，將這兩個引數賦給第二層的Div，作為他的長與寬的畫素值，這樣的話，無論在多大或多小的顯示器上，都可以顯示同樣的效果

2、CSS樣式表：這種方法，只能提前設定好遮罩層的長與寬了，但是就會出現一些問題：如果你的遮罩層設定的寬度、長度很大，那麼在小顯示器上就會出現瀏覽器的滾動條～～反之則會出現遮罩不上的問題

因為做HTML模型，所以我用的第二種方法，有個不太合理解決的方式：我把瀏覽器的下方（橫向的）滾動條給禁用掉了。程式碼是：在CSS樣式表中寫入

html,body { overflow-x:hidden;}

【遮罩層樣式】
注意幾點就行了：
1、三個Div層的樣式，position都要設為absolute;，因為只有設為absolute時，z-index：屬性才會生效！

2、半透明屬性：filter:alpha(opacity=50); IE專有屬性，設定層的透明度為 50% ，
                            -moz-opacity:0.5;    火狐FF 專有屬性，設定層的透明度為 50%。
        這兩條屬性都要加上，因為IE、火狐對其中的單一一條並不相容～～～
還有一點，你的遮罩層樣式中，一定要設定 width 與 height   ，否則透明屬性不起效～～

3、z-index：的順序，  z-index：屬性的值越小，則該層越在下方，最小值是1

【動作】
最後，在按鈕onclick 的時候，寫JS 將兩個層顯示出來就行了：
<input class="crmButton" type="button" value=" 搜索 " onclick="javascript:document.getElementById('apDiv1').style.display='';

document.getElementById('apDiv2').style.display=''" />

<!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=gb2312" /> <title>無標題文件</title> <style type="text/css">  </style> </head> <body> <div id="main"> <input name="button" type="button" class="bton pointer" value="請選擇" onclick="openBg(1);openSelect(1)"/> <input name="button" type="button" class="bton pointer" value="檢視" onclick="chakan();"/> <div id="result"> <div class="tit bgc_eee"> <h2>您已選擇的城市彙總</h2> </div> <div class="cont" id="makeSureItem"> <div > <input type="checkbox" name="ck01" value="全部" checked="checked" disabled="disabled" >全部 </div> </div> </div> </div> <div id="bg"> </div> <div id="selectItem" class="hidden"> <div class="tit bgc_ccc move" onmousedown="drag(event,this)"> <h2 class="left">請選擇城市</h2> <span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span> <span class="pointer right" onclick="makeSure();">[確定]</span> </div> <div class="cls"></div> <div class="cont"> <div id="selectSub"> <input type="checkbox" name="ck00" onclick="addPreItem(this)" value="全部1"/>全部 <input type="checkbox" name="ck00" onclick="addPreItem(this)" value="北京"/>北京 <input type="checkbox" name="ck00" onclick="addPreItem(this)" value="福建"/>福建 <input type="checkbox" name="ck00" onclick="addPreItem(this)" value="四川"/>四川 <input type="checkbox" name="ck00" onclick="addPreItem(this)" value="江蘇"/>江蘇 </div> </div> <div id="preview"> <div class="tit bgc_eee c_999"> <h2>您已選擇的城市</h2> </div> <div class="cont" id="previewItem"> </div> </div> </div> <script type="text/javascript"> /* ------使用說明----- */ /* 新增城市方法：新增組：找到id 是 "selectSub"中select標籤下，新增option標籤 value屬性遞增，找到 id 是 "selectSub",按照原有格式新增div,其id屬性遞增新增二級傅選礦選項複製 id 是 "selectSub" 下任意input標籤，貼上在需要新增的位置。 */ var grow = $("selectSub").getElementsByTagName("option").length; //組數 var showGrow = 0;//已開啟組 var selectCount = 0; //已選數量 var items = $("selectSub").getElementsByTagName("input"); //alert(maxItem); //var lenMax = 2; //alert(1); function $(o){ //獲取物件 if(typeof(o) == "string") return document.getElementById(o); return o; } function openBg(state){ //遮照開啟關閉控制 if(state == 1) { var iWidth = window.screen.availWidth; var iHeight = window.screen.availHeight; $("bg").style.display = "block"; $("bg").style.position = "absolute"; // $("bg").style.zIndex = "1"; $("bg").style.width = iWidth; $("bg").style.height = iHeight; // document.documentElement.style.overflow='hidden'; //$("bg").style.top = "0px"; // $("bg").style.left = "0px"; // $("bg").style.background = "#000"; // $("bg").style.filter = "alpha(opacity=40)"; // $("bg").style.opacity = "0.40"; var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight; //alert(document.body.offsetHeight); //alert(document.documentElement.offsetHeight); // $("bg").style.height = h + "px"; } else { $("bg").style.display = "none"; } } function openSelect(state){ //選擇城市層關閉開啟控制 if(state == 1) { $("selectItem").style.display = "block"; $("selectItem").style.left = (document.body.clientWidth - $("selectItem").style.width)/2 + "px"; $("selectItem").style.top = document.body.scrollTop + 100 + "px"; } else { $("selectItem").style.display = "none"; } } function addPreItem(select1){ $("previewItem").innerHTML = ""; if(select1.value=='全部1'){ if(select1.checked==true){ for(var i = 1 ; i < items.length ; i++){ items[i].checked = false; items[i].disabled = "disable"; } var allmes = "<input type='checkbox' checked='true' value='"+ items[0].value +"' onclick='copyItem(/"previewItem/",/"previewItem/");same(this);'>" + items[0].value; $("previewItem").innerHTML += allmes; return; } else{ for(var i = 1 ; i < items.length ; i++){ //items[i].checked == false; items[i].disabled = false; } return; } } var len　= 0 ; for(var i = 0 ; i < items.length ; i++) { if(items[0].checked == true){ } if(items[i].checked == true) { //len++; //if(len > lenMax) //{ // alert("不能超過" + lenMax +"個選項！") // return false; //} var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(/"previewItem/",/"previewItem/");same(this);'>" + items[i].value; $("previewItem").innerHTML += mes; //alert(items[i].value); } } } function makeSure(){ //alert(1); //$("makeSureItem").innerHTML = $("previewItem").innerHTML; openBg(0); openSelect(0); copyItem("previewItem","makeSureItem") } function copyHTML(id1,id2){ $(id2).innerHTML = $("id1").innerHTML; } function copyItem(id1,id2){ var mes = ""; var items2 = $(id1).getElementsByTagName("input"); for(var i = 0 ; i < items2.length ; i++) { if(items2[i].checked == true) { mes += "<input type='checkbox' checked='true' disabled value='"+ items2[i].value +"' onclick='copyItem(/"" + id2+ "/",/""+ id1 +"/");same(this);'>" + items2[i].value; } } $(id2).innerHTML = ""; $(id2).innerHTML += mes; //alert($(id2).innerHTML); } function chakan(){ var c= $(previewItem).getElementsByTagName("input"); for(var i = 0;i<c.length;i++){ if(c[i].checked ==true){ alert(c[i].value) } } } function same(ck){ for(var i = 0 ; i < items.length ; i++) { if(ck.value == items[i].value) { items[i].checked = ck.checked; } } } /* 滑鼠拖動 */ var oDrag = ""; var ox,oy,nx,ny,dy,dx; function drag(e,o){ var e = e ? e : event; var mouseD = document.all ? 1 : 0; if(e.button == mouseD) { oDrag = o.parentNode; //alert(oDrag.id); ox = e.clientX; oy = e.clientY; } } function dragPro(e){ if(oDrag != "") { var e = e ? e : event; //$(oDrag).style.left = $(oDrag).offsetLeft + "px"; //$(oDrag).style.top = $(oDrag).offsetTop + "px"; dx = parseInt($(oDrag).style.left); dy = parseInt($(oDrag).style.top); //dx = $(oDrag).offsetLeft; //dy = $(oDrag).offsetTop; nx = e.clientX; ny = e.clientY; $(oDrag).style.left = (dx + ( nx - ox )) + "px"; $(oDrag).style.top = (dy + ( ny - oy )) + "px"; ox = nx; oy = ny; } } document.onmouseup = function(){oDrag = "";} document.onmousemove = function(event){dragPro(event);} </script> </body> </html>

半透明遮罩效果 DIV

半透明遮罩效果 DIV

jquery 半透明遮罩效果

Qt實現半透明遮罩效果

給圖片動態新增半透明遮罩效果

JS彈出可移動的DIV對話方塊透明遮罩效果

Winform----自定義控制元件之背景半透明遮罩載入控制元件

C#實現Winform自定義半透明遮罩層

設定半透明遮罩背景

css之半透明遮罩

學習筆記3--CSS製作滑鼠放上後淡入透明遮罩層效果

DIV 灰色透明遮罩層，顯示，隱藏

JSP div 居中，透明遮罩層，圓角按鈕

用css3過濾做遮罩效果

Vegas如何使用子母軌制作遮罩效果？

Android 新手引導半透明蒙層效果實現

css動畫遮罩效果自上而下與自下而上

easyUI的treegrid新增節點（append）時間過長，設定等待（wait）遮罩效果

安卓實現區域性介面遮罩效果

小tip：CSS3下的圓形遮罩效果實現與應用

Unity功能記錄(十一) ------ 實現3D模型遮罩效果

半透明遮罩效果 DIV

相關推薦