jQuery遮罩層實(shí)現(xiàn)方法實(shí)例詳解(附遮罩層插件)
更新時(shí)間：2015年12月08日 10:26:14 作者：三月軟件工作室
這篇文章主要介紹了jQuery遮罩層實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery遮罩層樣式及功能實(shí)現(xiàn)技巧,并附帶分析了一個(gè)簡單jQuery遮罩層插件實(shí)現(xiàn)方法,需要的朋友可以參考下
本文實(shí)例分析了jQuery遮罩層實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
1 背景半透明遮罩層樣式
需要一個(gè)黑色（當(dāng)然也可以其他）背景，且須設(shè)置為絕對定位，以下是項(xiàng)目中用到的css樣式：
/* 半透明的遮罩層 */
#overlay {
background: #000;
filter: alpha(opacity=50); /* IE的透明度 */
opacity: 0.5; /* 透明度 */
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100; /* 此處的圖層要大于頁面 */
display:none;
}
2 jQuery實(shí)現(xiàn)遮罩
/* 顯示遮罩層 */
function showOverlay() {
$("#overlay").height(pageHeight());
$("#overlay").width(pageWidth());
// fadeTo第一個(gè)參數(shù)為速度，第二個(gè)為透明度
// 多重方式控制透明度，保證兼容性，但也帶來修改麻煩的問題
$("#overlay").fadeTo(200, 0.5);
}
/* 隱藏覆蓋層 */
function hideOverlay() {
$("#overlay").fadeOut(200);
}
/* 當(dāng)前頁面高度 */
function pageHeight() {
return document.body.scrollHeight;
}
/* 當(dāng)前頁面寬度 */
function pageWidth() {
return document.body.scrollWidth;
}
3 提示框
遮罩的目的無非讓人無法操作內(nèi)容，突出提示框，而提示框可參考上面的制作，z-index比遮罩層更高便可。主要問題是，如何控制提示框在瀏覽器居中。
/* 定位到頁面中心 */
function adjust(id) {
var w = $(id).width();
var h = $(id).height();
var t = scrollY() + (windowHeight()/2) - (h/2);
if(t < 0) t = 0;
var l = scrollX() + (windowWidth()/2) - (w/2);
if(l < 0) l = 0;
$(id).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 || (de && de.clientWidth) || document.body.clientWidth
}
/* 瀏覽器垂直滾動(dòng)位置 */
function scrollY() {
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/* 瀏覽器水平滾動(dòng)位置 */
function scrollX() {
var de = document.documentElement;
return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}
補(bǔ)充：
jQuery簡單遮罩層插件：
jQuery代碼：
(function ($) {
$.fn.ShowMask = function (options) {
var defaults = {
top: 150,
left: 200
}
var options = $.extend(defaults, options);
$("html").append('<div id="ui-mask"></div><div id="ui-mask-div" style="z-index: 99999;position: fixed;top:' + options.top + 'px;left:' + options.left + 'px;"><img src="Images/ui-loading.gif" alt="" /><span>操作正在進(jìn)行中，請耐心等待......</span></div>')
_this_ = $("#ui-mask");
_this_.height($(document).height())
_this_.show();
};
$.fn.HideMask = function (options) {
_this_ = $("#ui-mask");
_this_.remove();
};
})(jQuery);
css樣式：
#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(opacity=50);
-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()
{
$(this).ShowMask();
$.post('url',null,function(d,s){
$(this).HideMask();
});
}
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JQuery 遮罩層實(shí)現(xiàn)(mask)實(shí)現(xiàn)代碼
- jQuery操作dom實(shí)現(xiàn)彈出頁面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
- jQuery阻止移動(dòng)端遮罩層后頁面滾動(dòng)
- Jquery實(shí)現(xiàn)遮罩層的簡單實(shí)例(就是彈出DIV周圍都灰色不能操作)
- jquery實(shí)現(xiàn)簡單的遮罩層
- jquery下實(shí)現(xiàn)overlay遮罩層代碼
- jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果
- jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法
- 輕量級網(wǎng)頁遮罩層jQuery插件用法實(shí)例
- jQuery實(shí)現(xiàn)打開網(wǎng)頁自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能示例
- jQuery超簡單遮罩層實(shí)現(xiàn)方法示例
相關(guān)文章
jquery實(shí)現(xiàn)圖片翻頁效果,大家可以使用下面的方法2013-12-12
jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼
有時(shí)候我們需要讀取JSON格式的數(shù)據(jù)文件，在jQuery中可以使用Ajax或者 $.getJSON()方法實(shí)現(xiàn)，下面有個(gè)不錯(cuò)的示例，需要的朋友可以參考下2013-11-11
基于jQuery實(shí)現(xiàn)歌詞滾動(dòng)版音樂播放器的代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)歌詞滾動(dòng)版音樂播放器的代碼,代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
如何選擇input框，方法貌似有很多，而在jquery中有個(gè)相當(dāng)簡單不錯(cuò)的方法，在下面為大家介紹下詳細(xì)的實(shí)現(xiàn)，希望大家可以練練手哦2013-09-09
這篇文章主要為大家詳細(xì)介紹了jquery輪播圖插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
queue是用來維護(hù)函數(shù)隊(duì)列的。比較常用的是queue(queueName, callback);其中queueName缺省是fn，即標(biāo)準(zhǔn)函數(shù)隊(duì)列。2011-06-06
jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼,涉及jQuery針對頁面元素動(dòng)態(tài)操作及響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-02-02
jquery重復(fù)提交請求一般來說有兩個(gè)原因，一是沒有取消綁定；二是多次引用同一個(gè)js文件2014-05-05
這篇文章主要介紹了jQuery隊(duì)列操作方法實(shí)例,總結(jié)出了一個(gè)簡潔優(yōu)雅的隊(duì)列控制方法,需要的朋友可以參考下2014-06-06
今天用jQuery操作table時(shí)，出現(xiàn)了一個(gè)兼容性的問題，以前都說jQuery的兼容性是絕對可靠的，今天發(fā)現(xiàn)了這個(gè)bug！2010-07-07