Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jquery蒙版控件实现代码

jquery蒙版控件实现代码

发布时间:2013-07-22   编辑:www.jquerycn.cn
jquery蒙版控件实现代码,学习jquery的朋友可以参考下。
jquery蒙版控件实现代码,学习jquery的朋友可以参考下。 样式代码:
复制代码 代码如下:

#div_maskContainer
{
display: none;
}
/*蒙版样式*/
#div_Mask{
z-index:1000;
filter:alpha(opacity=40);
position: absolute;
left:0px;
top:0px;
background-color: #D4D0C8;
}
/*显示信息样式*/
#div_loading{
width:300px;height: 60px;position: absolute;
border: 1px outset #B4E0F2;
padding-top: 40px;
text-align: center;
background-color: #CCE9F9;
z-index: 10000;
filter:alpha(opacity=100);!important
}


js控件代码:
复制代码 代码如下:

/**
蒙版信息控件
用法:
1.引用 mask.css
2.引用 mask.js
3.调用方法
var obj=new MaskControl();
//显示蒙版提示信息
obj.show("显示的提示信息");
//隐藏蒙版提示信息
obj.hide();
//显示提示信息,并隔timeOut(1000代表1秒)自动关闭
obj.autoDelayHide=function(html,timeOut)
*/
function MaskControl(){
this.show=function(html){
var loader=$("#div_maskContainer");
if(loader.length==0){
loader=$("<div id='div_maskContainer'><div id='div_Mask' ></div><div id='div_loading' ></div></div>");
$("body").append(loader);
}
self.loader=loader;
var w=$(window).width();
var h=$(window).height();
var divMask=$("#div_Mask");
divMask.css("top",0).css("left",0).css("width",w).css("height",h);
var tipDiv=$("#div_loading");
if(html==undefined)
html="";
tipDiv.html(html);
loader.show();
var x=(w-tipDiv.width())/2;
var y=(h-tipDiv.height())/2;
tipDiv.css("left",x);
tipDiv.css("top",y);
},
this.hide=function(){
var loader=$("#div_maskContainer");
if(loader.length==0) return ;
loader.remove();
},
this.autoDelayHide=function(html,timeOut){
var loader=$("#div_maskContainer");
if(loader.length==0) {
this.show(html);
}
else{
var tipDiv=$("#div_loading");
tipDiv.html(html);
}
if(timeOut==undefined) timeOut=3000;
window.setTimeout(this.hide,timeOut);
}

}


您可能感兴趣的文章:
Illustrator仿照photoshop蒙版绘制漂亮透明变化的月亮效果教程
photoshop基础图层与蒙版使用技巧心得
Photoshop利用蒙版和高斯模糊制作彩色透明水滴教程
电商网站上常用的js放大镜效果(京东商城的js放大镜代码)
jquery为表单控件赋值实例
canvas实现的骨骼动画
HTML5音频与视频问题及解决方法
photoshop制作数码时尚数字化眼球的简单设计教程
Illustrator临摹动漫图片经验技巧解析
photoshop使用曲线调整图层教程分享

[关闭]