制作web蒙版

今天做项目需要制作蒙版。根据实际经验来看。基于ios比web制作蒙版容易太多了。为什么web制作蒙版这么难呢？在我看来因为web框架冲突，从另一方面看这也是web快速发展且比较随意的侧证。 下面进入正题。

---

脱离标准文档流

首先很多框架对对使用了某个class值的元素及其子元素进行改造。为了避免产生意外——蒙版要和页面主要文档流要分开！简单说所有蒙版元素放到body元素的最底部，然后在一个你认为爽的地方设置蒙版position：absolute。这样蒙版成功脱离标准文档流。

html文件，蒙版放在这里

</footer>
  <div class="mengban_text_con">
    <div class="title"></div>
    <div class="text"></div>
  </div>   
</body>
</html>

css文件，设置position

.mengban_text_con
{
  position: absolute;
  background:rgba(13, 89, 131, 0.9);
  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#8b0d5583,endcolorstr=#8b0d5583);
}

罩住元素

目前公司对前端的要求越来越高，前端开发工程师应当具备适配多终端。那么问题来了：如何罩住一个可能随屏幕宽度而改变位置大小的元素。准备好了吧？

写一个类专门处理位置依赖关系

function keep_within_bounds(ele)
{
    this.ele = $(ele);    //jquery对象也可以再包裹

                              //通过下面这个方法呢建立与另外一个元素的位置宽高依赖关系
                              //ele_prev:依赖元素
                              //x:相对依赖元素的水平偏移量。值若在再（0，1）之间，偏移量为依赖元素宽与x的乘积；若大于1，偏移x像素
                              //y:相对依赖元素的垂直偏移量。值若在再（0，1）之间，偏移量为依赖元素宽与x的乘积；若大于1，偏移y像素
                              //width:相对依赖元素的宽度。值若在再（0，1）之间，宽度为依赖元素宽与width的乘积；若大于1，宽度为依赖元素宽度+width
                              //height:相对依赖元素的宽度。值若在再（0，1）之间，宽度为依赖元素宽与height的乘积；若大于1，宽度为依赖元素宽度+height
    this.setframeWithEle_x_y_w_h = function(ele_prev,x,y,width,height)
    {
    
    var ele = this.ele;   
    var ele_prev = $(ele_prev);
    var x = x;
    var y = y;
    var width = width;
    var height = height;
    
    $(window).on(
    'resize',
    {ele:ele,ele_prev:ele_prev,x:x,y:y,width:width,height:height},
    function(event)
    {
        var ele = event.data.ele;
        var ele_prev = event.data.ele_prev;
        var x = event.data.x;
        var y = event.data.y;
        var width = event.data.width;
        var height = event.data.height;
        if(0<x && x<1)
        {x = ele_prev.width() * x}
        if(0<y && y<1)
        {y = ele_prev.width() * y}
        if(width<=1)
        {width = ele_prev.width() * width;}
        else
        {width += ele_prev.width()}
        if(height<=1)
        {height = ele_prev.height() * height;}
        else
        {height += ele_prev.height()}
        ele.css('position','absolute')
        ele.css({'left':ele_prev.offset().left - x + 'px',
                 'top':ele_prev.offset().top - y + 'px',
                 'width':width + 'px',
                 'height':height + 'px'})
    });
}
}

实例化对象，调用方法

//---当页面准备好，pageshow之前---
$('document').ready(function(){
  var ser_row1_row = $('.mengban_text_con');
  var ser_row1_row_prev = $('.mengban_text_con_b');
  var b = new keep_within_bounds(ser_row1_row);
  b.setframeWithEle_x_y_w_h(ser_row1_row_prev,0,0,1,1);
      $(window).resize();      //主动触发一次resize事件
});

这样，当依赖元素位置宽高随着屏幕宽度变化而变化后，在window的resize事件监听者中重新计算蒙版的位置和宽高。谢谢