、效果圖:前加遮罩層,黃色字體顯示提醒,后去遮罩層后
html頁面中的元素
<div id="opgroup">這里是您的目標div,有自己的子元素和樣式</div>
說明:頁面要引用jquery等
不能發代碼很別扭(湊合看吧,或去csdn看我的博文)
function showhideoptdiv(divid,optid,ishow)
{//定一個遮罩層臨時元素
var opthtml="<div id=\"opacitybox\" style=\"width:100%;height:100%;display:none;background:#000;color:#ff0;font-size:12px;margin:1px auto;text-align:center;line-height:35px;vertical-align:center;filter:alpha(opacity=50);opacity: 0.5;position:absolute;z-index:1001;\">當前自動模式無法點動操作</div>";
console.log(opthtml);
//$('#led').append(opthtml);
$(document.body).append(opthtml);
//console.log(optid);
if(ishow)
{//顯示
//先獲取目標的l,t,w,h
//console.log($(divid).offset());
var sleft=$(divid).offset().left+"px";
var stop=$(divid).offset().top-5+"px";
var swidth=$(divid).width()+"px";
var sheight=$(divid).height()+5+"px";
//console.log(swidth);
//console.log(sheight);
//將目標的四坐標元素給遮罩層
$('#'+optid).css("left",sleft);
$('#'+optid).css("top",stop);
//$("#mydiv").height(10); 等效于 $("#mydiv").css("height","10px");{ height: "10px", background: "blue" }
$('#'+optid).css("width",swidth);
$('#'+optid).css("height",sheight);
$('#'+optid).css({'display':'block'});
console.log('遮罩層顯示');//opacitybox
}else{//移除
$('#'+optid).css({'display':'none'});
$('#'+optid).remove();
}
}
----------------------調用方法-----------------------js調用---要引用jquery---------------
//調用腳本方法
//第一個參數:要加遮罩層的div(帶#)
//第二個參數:遮罩層的div(不帶#)
//第三個參數:false去除遮罩層,true增加遮罩層
showhideoptdiv('#opgroup','opacitybox',false);
或
showhideoptdiv('#opgroup','opacitybox',true);
---------------------------------------------------------
如果可能,體驗我的測試遠程開關燈體驗連接:http://x5zj.com/x5zjbox/8266.html
我在使用,不要亂點啊!基本24小時開放(白天一般我要用調試)
可以只看不點,溫濕度也會自動刷新(15秒左右)。如果點擊沒回應就停一會,有相應后再體驗。
圖1
圖2
圖3
就愛UI - 分享UI設計的點點滴滴
罩層基礎版。
基礎課中有朋友想了解遮罩層,今天就用四步完成英雄聯盟官網上的遮罩層效果。開始之前用十天的基礎課程知識做好準備工作。
·第一步:html結構和基礎樣式。添加一個did盒子,里面一個標題,兩行文本。此時遮罩層在主結構的下方,給遮罩層寫上固定寬高,背景顏色用黑色,帶點透明度。看下效果。標題和兩行文本寫上字體大小和字體顏色,看下效果。
·第二步:美化樣式。遮罩層添加背景圖片,不重復顯示,位置微調,文本內內容居中,標題居中設置,兩行文本也居中設置。看下效果。給遮罩層加上那邊距,讓里面內容整體垂直居中。
·第三步:調整遮罩層位置。遮罩層絕對定位,同時外層盒子寫上相對定位代碼,開始設置位置,看下效果。
·第四步:讓遮罩層先隱藏,鼠標經過時再顯示即可。
到此遮罩層效果就完成了。反過來用,只需要調整隱藏的順序,再加一點位置移動和顏色改變,效果更好。
下次再講講遮罩層的靈活運用。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。