JQuery 遮罩层实现(mask)实现代码


Posted in Javascript onJanuary 09, 2010

其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现。好了不多说,上我的代码,这些代码是根据网上的一位朋友实现的documentMask基础上进行整改的。使使用上更加灵活方便了。
(没什么技术含量,旨在为那些需要的朋友提供帮助)

(function(){ 
$.extend($.fn,{ 
mask: function(msg,maskDivClass){ 
this.unmask(); 
// 参数 
var op = { 
opacity: 0.8, 
z: 10000, 
bgcolor: '#ccc' 
}; 
var original=$(document.body); 
var position={top:0,left:0}; 
if(this[0] && this[0]!==window.document){ 
original=this; 
position=original.position(); 
} 
// 创建一个 Mask 层,追加到对象中 
var maskDiv=$('<div class="maskdivgen"> </div>'); 
maskDiv.appendTo(original); 
var maskWidth=original.outerWidth(); 
if(!maskWidth){ 
maskWidth=original.width(); 
} 
var maskHeight=original.outerHeight(); 
if(!maskHeight){ 
maskHeight=original.height(); 
} 
maskDiv.css({ 
position: 'absolute', 
top: position.top, 
left: position.left, 
'z-index': op.z, 
width: maskWidth, 
height:maskHeight, 
'background-color': op.bgcolor, 
opacity: 0 
}); 
if(maskDivClass){ 
maskDiv.addClass(maskDivClass); 
} 
if(msg){ 
var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">'+msg+'</div></div>'); 
msgDiv.appendTo(maskDiv); 
var widthspace=(maskDiv.width()-msgDiv.width()); 
var heightspace=(maskDiv.height()-msgDiv.height()); 
msgDiv.css({ 
cursor:'wait', 
top:(heightspace/2-2), 
left:(widthspace/2-2) 
}); 
} 
maskDiv.fadeIn('fast', function(){ 
// 淡入淡出效果 
$(this).fadeTo('slow', op.opacity); 
}) 
return maskDiv; 
}, 
unmask: function(){ 
var original=$(document.body); 
if(this[0] && this[0]!==window.document){ 
original=$(this[0]); 
} 
original.find("> div.maskdivgen").fadeOut('slow',0,function(){ 
$(this).remove(); 
}); 
} 
}); 
})();

下面是使用实例代码可供参考
代码
<html> 
<head> 
<style> 
body{ 
font-size:12px; 
} 
</style> 
<script src="http://img.3water.com/jslib/jquery/jquery-1.3.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
(function(){ 
$.extend($.fn,{ 
mask: function(msg,maskDivClass){ 
this.unmask(); 
// 参数 
var op = { 
opacity: 0.8, 
z: 10000, 
bgcolor: '#ccc' 
}; 
var original=$(document.body); 
var position={top:0,left:0}; 
if(this[0] && this[0]!==window.document){ 
original=this; 
position=original.position(); 
} 
// 创建一个 Mask 层,追加到对象中 
var maskDiv=$('<div class="maskdivgen"> </div>'); 
maskDiv.appendTo(original); 
var maskWidth=original.outerWidth(); 
if(!maskWidth){ 
maskWidth=original.width(); 
} 
var maskHeight=original.outerHeight(); 
if(!maskHeight){ 
maskHeight=original.height(); 
} 
maskDiv.css({ 
position: 'absolute', 
top: position.top, 
left: position.left, 
'z-index': op.z, 
width: maskWidth, 
height:maskHeight, 
'background-color': op.bgcolor, 
opacity: 0 
}); 
if(maskDivClass){ 
maskDiv.addClass(maskDivClass); 
} 
if(msg){ 
var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">'+msg+'</div></div>'); 
msgDiv.appendTo(maskDiv); 
var widthspace=(maskDiv.width()-msgDiv.width()); 
var heightspace=(maskDiv.height()-msgDiv.height()); 
msgDiv.css({ 
cursor:'wait', 
top:(heightspace/2-2), 
left:(widthspace/2-2) 
}); 
} 
maskDiv.fadeIn('fast', function(){ 
// 淡入淡出效果 
$(this).fadeTo('slow', op.opacity); 
}) 
return maskDiv; 
}, 
unmask: function(){ 
var original=$(document.body); 
if(this[0] && this[0]!==window.document){ 
original=$(this[0]); 
} 
original.find("> div.maskdivgen").fadeOut('slow',0,function(){ 
$(this).remove(); 
}); 
} 
}); 
})(); 
</script> 
</head> 
<body style="width:100%"> 
测试 
<div id="test" style="width:200px;height:100px; border:black 1px solid;"> 
</div> 
<a href="#" onclick="$('#test').mask('DIV层遮罩')">div遮罩</a> 
<a href="#" onclick="$('#test').unmask()">关闭div遮罩</a> 
<a href="#" onclick="$(document).mask('全屏遮罩').click(function(){$(document).unmask()})">全部遮罩</a> 
</body> 
</html>
Javascript 相关文章推荐
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
js实现拖拽功能
Mar 01 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
vue实现图片上传预览功能
Dec 23 Javascript
Javascript UrlDecode函数代码
Jan 09 #Javascript
JavaScript 页面坐标相关知识整理
Jan 09 #Javascript
了解jQuery技巧来提高你的代码
Jan 08 #Javascript
在html页面上拖放移动标签
Jan 08 #Javascript
利用js获取服务器时间的两个简单方法
Jan 08 #Javascript
JavaScript中的集合及效率
Jan 08 #Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 #Javascript
You might like
PHP面向对象编程快速入门
2006/10/09 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
javascript计时器详解
2015/02/28 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python比较两个列表大小的方法
2015/07/11 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
Django权限设置及验证方式
2020/05/13 Python
python模块如何查看
2020/06/16 Python
python re.match()用法相关示例
2021/01/27 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
餐饮采购员岗位职责
2014/03/15 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
JavaScript 对象创建的3种方法
2021/11/17 Javascript