Demo地址:
http://www.sohoqd.com/alterdemo/demoIfm/IfmMaskDemo.html
/*
* IfmMask 1.1
* Copyright (c) 2010 Alterhz http://www.alterteam.cn
* Date: 2010-5-3
* 运用iframe元素添加的遮罩层,可以遮挡flash。
* 参数列表:
* zId:遮罩层iframe的Id号
* v:遮罩层是否可见
* l:遮罩层左边距
* t:遮罩层右边距
* w:遮罩层宽度
* h:遮罩层高度
* index:遮罩层深度
* o:遮罩层透明度
* color:遮罩层的颜色
* 函数列表:
* IfmMask.IfmMask(zId, v, l, t, w, h, index, o, color) //构造函数
* IfmMask.getVisible() //获取遮罩层的显示和隐藏状态
* IfmMask.show() //显示遮罩层
* IfmMask.hide() //隐藏遮罩层
* IfmMask.fadeIn() //缓慢淡入遮罩层
* IfmMask.fadeOut() //缓慢淡出遮罩层
* IfmMask.changeSize(w, h) //改变遮罩层的尺寸
* IfmMask.changeZoom(index) //改变遮罩层的深度
* IfmMask.changeAlpha(o) //改变遮罩层的透明度
* IfmMask.changePosition(l, t) //改变遮罩层的位置
* IfmMask.getDOM() //兼容IE、Firefox的遮罩层iframe DOM获取函数
* 使用方法,例如:
* (1) var z1 = new IfmMask('z1', true, "30px", "30px", "800px", "600px", 2, 0.5, "#f00");
* (2) var z2 = new IfmMask('z2'); z2.changePosition("200px", "200px");
* (3) $(z1.getDOM()).bind("click", function() { //事件处理函数 }); //给遮罩层添加事件处理函数
*/
//遮罩层的颜色
var maskColor;
//遮罩层构造函数
function IfmMask(zId, v, l, t, w, h, index, o, color) {
//遮罩层的Id号
this.id = zId;
//判断参数是否存在
if("undefined" == typeof(color)) {
maskColor = "#000000";
}
else {
maskColor = color;
}
//遮罩层iframe的html创建代码
var ifmStr = "<iframe id='" + zId + "' frameborder='0' src='javascript:parent.getPage()'></iframe>";
//将iframe添加到body中
$("body").append(ifmStr);
//判断参数是否存在
if("undefined" == typeof(l)) {
l = "0px";
}
if("undefined" == typeof(t)) {
t = "0px";
}
if("undefined" == typeof(w)) {
//获取屏幕宽度
w = $("body").width();
}
if("undefined" == typeof(h)) {
//获取屏幕高度。
h = $("body").height();
}
if("undefined" == typeof(index)) {
index = 2010;
}
//改变遮罩层的css。
$("#" + this.id).css({"position": "absolute", "left": l,"top": t , "width": w, "height": h, "z-index": index});
//判断参数是否存在
if("undefined" == typeof(o)) {
o = 0.5;
}
//改变遮罩层的透明度。
$("#" + this.id).fadeTo("fast", o);
//判断参数是否存在。
if("undefined" == typeof(v)) {
v = true;
}
//遮罩层是否可见
if(!v) {
$("#" + this.id).hide();
}
};
//改变遮罩层的深度
IfmMask.prototype.changeZoom = function(index) {
$("#" + this.id).css({"z-index": index});
}
//获取遮罩层的显示和隐藏状态
IfmMask.prototype.getVisible = function() {
if("none" == $("#" + this.id).css("display")) {
return false;
}
else {
return true;
}
}
//显示遮罩层
IfmMask.prototype.show = function() {
$("#" + this.id).show();
}
//隐藏遮罩层
IfmMask.prototype.hide = function() {
$("#" + this.id).hide();
}
//缓慢淡入遮罩层
IfmMask.prototype.fadeIn = function() {
$("#" + this.id).fadeIn();
}
//缓慢淡出遮罩层
IfmMask.prototype.fadeOut = function() {
$("#" + this.id).fadeOut();
}
//改变遮罩层的尺寸
IfmMask.prototype.changeSize = function(w, h) {
$("#" + this.id).css({"width": w, "height": h});
}
//改变遮罩层的位置
IfmMask.prototype.changePosition = function(l, t) {
$("#" + this.id).css({"left": l, "top": t});
}
//改变遮罩层的透明度
IfmMask.prototype.changeAlpha = function(o) {
$("#" + this.id).fadeTo("fast", o);
};
//兼容IE、Firefox的遮罩层iframe DOM获取函数
IfmMask.prototype.getDOM = function() {
return document.getElementById(this.id).contentDocument || document.frames[this.id].document;
};
//iframe元素的子页面
function getPage() {
var code = ["<html>"];
code.push("<body style='background:" + maskColor + "'>");
code.push("</body>");
code.push("</html>");
return code.join("");
}
引用:
http://www.alterteam.cn/blogDetail.html?id=47
Demo地址:
http://www.sohoqd.com/alterdemo/demoIfm/IfmMaskDemo.html
分享到:
相关推荐
非常好用的一款jquery遮罩层插件,网页制作必备。
busy-load是一款灵活的jquery loading遮罩层插件。它可以在加载的时候为容器添加一个遮罩层,并显示loading效果。loader可以是字体图标,图片,文字等,非常灵活方便。
JQuery上传插件遮罩层插件,适合用于后台开发使用。里面包含遮罩层上传图片文件等示例。
基于jQuery弹出层插件thickbox 智能提示
示例的目的是iframe中弹出窗口后,遮罩层能遮盖整个可视区域,能让弹出层返回参数到iframe页面,也可以在弹出层直接提交,直接提交用jquery.form.js插件。 代码有详细注释,麻烦慢慢琢磨,有问题可qq联系,505074122
这是一款jQuery图片添加渐变遮罩层插件。通过该插件,可以为一副背景图片添加指定的渐变遮罩层。该插件支持CSS mix-blend-mode混合模式。
jquery遮罩层插件mloading,支持jquery低版本如1.4.4等,全屏遮罩(即:页面即使出现滚动条,仍能全部遮罩到)
JQUERY遮罩效果实现网页JS遮罩层,使网站不用刷新操作
基于jquery的BlockUI做的遮罩层
轻量级的jQuery遮罩层插件-Simple Overlay,当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层
一组非常好看的jQuery遮罩背景弹出层对话框插件,点击按钮弹出网页对话框代码,共有16种效果。
jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会组织用户在页面进行的操作,直到插件被关闭。
flash-jquery插件 flash-jquery插件 flash-jquery插件 flash-jquery插件
jQuery有遮罩层的广告幻灯片插件
jquery遮罩层 jquery遮罩层 jquery遮罩层 jquery遮罩层
Jquery 遮罩插件BLOCKui,非常灵活的遮罩插件。
jQuery弹出层插件三种简单遮罩弹出框效果
一套基于jQuery的遮罩图片切换mbMaskedGallery插件包源码例子
jquery插件jquery.reveal