来自 关于计算机 2019-12-08 03:34 的文章
当前位置: 澳门太阳娱乐手机登录 > 关于计算机 > 正文

jQuery遮罩层落成方式实例精解_jquery_脚本之家

本文实例分析了jQuery遮罩层实现方法。分享给大家供大家参考,具体如下:

1 背景半透明遮罩层样式

澳门太阳娱乐手机登录,需要一个黑色背景,且须设置为绝对定位,以下是项目中用到的css样式:

/* 半透明的遮罩层 */#overlay { background: #000; filter: alpha; /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100; /* 此处的图层要大于页面 */ display:none;}

2 jQuery实现遮罩

/* 显示遮罩层 */function showOverlay.height; $.width; // fadeTo第一个参数为速度,第二个为透明度 // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题 $.fadeTo;}/* 隐藏覆盖层 */function hideOverlay.fadeOut;}/* 当前页面高度 */function pageHeight() { return document.body.scrollHeight;}/* 当前页面宽度 */function pageWidth() { return document.body.scrollWidth;}

遮罩的目的无非让人无法操作内容,突出提示框,而提示框可参考上面的制作,z-index比遮罩层更高便可。主要问题是,如何控制提示框在浏览器居中。

/* 定位到页面中心 */function adjust.width.height +  -  t = 0; var l = scrollX -  l = 0; $.css({left: l+'px', top: t+'px'});}//浏览器视口的高度function windowHeight() { var de = document.documentElement; return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;}//浏览器视口的宽度function windowWidth() { var de = document.documentElement; return self.innerWidth ||  || document.body.clientWidth}/* 浏览器垂直滚动位置 */function scrollY() { var de = document.documentElement; return self.pageYOffset ||  || document.body.scrollTop;}/* 浏览器水平滚动位置 */function scrollX() { var de = document.documentElement; return self.pageXOffset ||  || document.body.scrollLeft;}

补充:

jQuery简单遮罩层插件:

 { $.fn.ShowMask = function  { var defaults = { top: 150, left: 200 } var options = $.extend; $.append('操作正在进行中,请耐心等待......') _this_ = $; _this_.height _this_.show(); }; $.fn.HideMask = function  { _this_ = $; _this_.remove;

#ui-mask{ background-color: #666; position: absolute; z-index: 9999; left: 0; top: 0; display: none; width: 100%; height: 100%; opacity: 0.5; filter: alpha; -moz-opacity: 0.5;}#ui-mask-div img{ width: 50px; height: 50px; float: left;}#ui-mask-div span{ height: 50px; line-height: 50px; display: block; float: left; color: Red; font-weight: bold; margin-left: 5px;}

function btn_save; $.post('url',null,function.HideMask;}

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

本文由澳门太阳娱乐手机登录发布于关于计算机,转载请注明出处:jQuery遮罩层落成方式实例精解_jquery_脚本之家

关键词: