qmask 纯js 遮罩

【前言】

一直想找一个纯js的插件,但是找了好多都不是很合适我的需求,

在一个前端群求推荐,结果直接被鄙视说自己写。

于是花了点时间写一个,可能会有问题,

但是目前感觉还不错,有需要的拿去。


【qmask.js】

// 创建并添加遮罩
var background = document.createElement('div');
background.style.cssText = 'display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:white;z-index:1001;-moz-opacity:0.7;opacity:.70;filter:alpha(opacity=70);';
document.body.appendChild(background);

// 创建并添加loading.gif
var loading = document.createElement('img');
loading.src = base + '/WUI/qmask/loading.gif';
loading.style.cssText = 'display:none;position:absolute;top:30%;left:40%;width:200px;height:200px;z-index:1002;overflow:auto;';
document.body.appendChild(loading);

// 开启
qmask();

// 开启方法
function qmask(){
	background.style.display = 'block';
	loading.style.display = 'block';
}

// 隐藏方法
function qhide(){
	background.style.display = 'none';
	loading.style.display = 'none';
}

【loading.gif】

qmask 纯js 遮罩_第1张图片

感觉这个图片比较炫,背景是白色的,所以遮罩背景也设置为了白色。


【zip下载】

地址:http://download.csdn.net/detail/uikoo9/7813241

你可能感兴趣的:(qmask 纯js 遮罩)