使用原生js实现页面蒙灰(mask)效果

        对于web应用开发者,当用户进行界面浏览时如果后台程序处理程序时间较长,那么用户在网页的等待时间会较长,但是如果页面上没有一个比较友好的提示方式

(增加蒙灰效果),那么用户体验会不是特别良好,用户不知道现在是不是应该点击别的程序,用户并不知道是不是应该继续等待网页,还是可以点击别的页面。

现在就有一个比较良好的交互,就是增加蒙灰效果。像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果,当然jquery也提供了这种蒙灰方法。在此作者希望自己也能够

使用原生的js实现自己的蒙灰效果。故自己做了尝试。实现了蒙灰效果。在此我只关注实现,页面美观程度我没有太多调整,所以页面不太美观。在此贴出实现代码。

 



 
   New Document 
  
  
  
  
 
 
  
 
  
  
  
蒙灰我吧


解释一下代码中比较重要的地方。

.maskStyle是蒙灰层的样式

其中

filter:alpha(opacity=50);
opacity:0.8;

是代表蒙灰层透明度,filter属性是为了兼容IE8浏览器

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

PS:蒙灰效果需要把要蒙灰到element放到div中才可以

你可能感兴趣的:(web开发)