菜单

jQuery遮罩层效果实例剖判_jquery_脚本之家

2020年3月12日 - www.2138.com

jQuery遮罩层效果实例剖判_jquery_脚本之家。本文实例分析了jQuery遮罩层效果。分享给大家供大家参考,具体如下:

Example | xHTML1.0*{font-family:Arial, Helvetica, sans-serif;font-size:12px;}#full_box{background-color:gray;display:none;z-index:3;position:absolute;left:0px;top:0px;filter:Alpha;/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4;}#dialog{position:absolute;width:200px;height:200px;background:#F00;display:none;z-index:5;}<!--function showBox.height.width.css({width:bW,height:bH,display:"block"});var objWH = getObjWh;var tbT = objWH.split[0] + "px";var tbL = objWH.split[1] + "px";$.css({top:tbT,left:tbL,display:"block"});$.html("<div style="text-align:center" mce_style="text-align:center">&#27491;&#22312;&#21152;&#36733;&#65292;&#35831;&#31245;&#21518;...</div>");$.scroll{ resetBox.resize{ resetBox;}function resetBox() {var full_box = $.css;if  {var bH = $;var bW = $;var objWH = getObjWh;var tbT = objWH.split[0] + "px";var tbL = objWH.split[1] + "px";$.css({top:tbT,left:tbL,display:"block"});}}function getObjWh {var st = $;var sl = $;var ch = $;var cw = $;var objH = $;var objW = $;var objT = Number - Number/2;var objL = Number - Number/2;return objT +"|" +objL;}function closeBox.css;$.css;}// -->click关闭

其实遮罩层原理很简单。

一个div 遮住下面的内容。

其中比较关键的一个css 样式是

x-index: 整数值

数值越大在越上层,越小就在越下层,可以是负数。

上面的js 代码有部分错误。下面已经修正。

//显示层function showBox { var bH = document.body.offsetHeight;//$; var bW = document.body.offsetWidth;//$; if .height.height.css({width:bW,height:bH,display:"block"}); var objWH = getObjWh; var tbT = objWH.split[0] + "px"; var tbL = objWH.split[1] + "px"; if{ $.show(); }else if{ $.show(); }else{ $; } $.scroll{ resetBox.resize{ resetBox;}//重置层function resetBox { var full_box = $.css; if  { var bH = document.body.offsetHeight;//$; var bW = document.body.offsetWidth;//$; if .height.height(); } var objWH = getObjWh; var tbT = objWH.split[0] + "px"; var tbL = objWH.split[1] + "px"; $.css; $.css; }}//获得层参数function getObjWh { var st = $; var sl = $; var ch = $; var cw = $; var objH = $; var objW = $; var objT = Number - Number/2; var objL = Number - Number/2; return objT +"|" +objL;}//关闭层function closeBox { if{ $.hide(); }else if{ $.hide(); }else{ $; } $;}

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图