、效果图:前加遮罩层,黄色字体显示提醒,后去遮罩层后
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小时内与您取得联系。