Cover

Cover动画组件，提供cover显示隐藏、定位、自定义形状和背景等功能特性。

调用方式

// 绑定cover到.cover
$(".cover").cover(option);

// 直接绑定到body上，与$("body").cover(option)等效
$.cover(option);

配置说明

配置信息可以通过js传参，也可以通过元素的data-*的方式。

配置信息也可以被trigger的data-*来重置。

具体配置信息如下：

name type default description
trigger element null cover触发显示的元素。
dismiss null null cover触发隐藏的元素。
background string 随机 cover的背景色，可通过trigger的data-background配置重置。下同
duration int 1000 动画耗时
startPos string "source"

cover动画开始时的位置，默认为source（trigger的中心位置）。

可选参数：source|top|center|bottom
offset Array [0,0] cover在startPos的基础上的偏移量。
expandAxis string 'x' cover扩展方向，可选 x|y|xy
isFloat BOOL true 触发元素是否保持在cover上方
zIndex int 999 cover的z-index
callback functon function(){} 事件回调，有两个参数，第一个参数为事件类型，第二个参数为当前cover对象。

DEMO展示

<!-- CSS -->
<style type="text/css">
body{position: absolute;top:0px;left:0px;width: 100%;height:100%;}
.ui-frozen-cover{overflow: hidden;position: absolute;top:0px;left:0px;width: 100%;height:100%;}
.item{width:100%;height:25%;display: -webkit-box;-webkit-box-pack:center; -webkit-box-align:center}
.close{position:fixed;top:10px;right:10px;display: block;width:50px;height:50px;color:#fff;border:#fff 1px solid; text-align: center;border-radius: 50px;line-height: 50px;display: none;z-index: 2000}
.title{color:#fff;display: block;text-align: center;font-size: 24px;-webkit-transition:all .5s .3s;}
.info{color:#fff;display: block;text-align: center;font-size: 12px;-webkit-transition:all .5s;top:50%;width:100%;top:50%;position: absolute;z-index: 2000;opacity: 0;-webkit-transform:translateY(50px);}
.info.show{opacity: 1;-webkit-transform:translateY(0);}
</style>

<!-- HTML -->
<div class="ui-frozen-cover" id="cover" data-start-pos="source" data-trigger=".item" data-dismiss=".close">
    <div class="close" >关闭</div>
    <div class="item" style="background:#35a;" data-background="#35a">
        <div class="title">网页重构</div>
    </div>
    <div class="item" style="background:#880;" data-background="#880">
        <div class="title">前端开发</div>
    </div>
    <div class="item" style="background:#4a3;" data-background="#4a3">
        <div class="title">交互设计</div>
    </div>
    <div class="item" style="background:#099;" data-background="#099">
        <div class="title">视觉设计</div>
    </div>
</div>
<div class="text">
    <div class="info">
        <p>全球最牛网页重构</p>
    </div>
    <div class="info">
        <p>全球最牛前端开发</p>
    </div>
    <div class="info">
        <p>全球最牛交互设计</p>
    </div>
    <div class="info">
        <p>全球最牛视觉设计</p>
    </div>

</div>


<!-- JS -->
<script type="text/javascript">
$(".ui-frozen-cover").cover({
    callback:function(type,obj){
        switch(type){
            case "show":
            covershow(obj);
            break;
            case "hide":
            coverhide(obj);
            break;
            case "hidden":
            coverhidden(obj);
            break;
            case "shown":
            covershown(obj);
            break;
        }

    }
});
function covershow(cover){
    if(!cover._isShown){
        var title=cover.currentTrigger.find('.title'),
            index=$(".item").index(cover.currentTrigger);

        title.css({
            '-webkit-transform':'translateY('+(cover.position.screenHeight/2-title.offset().top-30)+'px)'
        });
        $('.info').eq(index).css({
            "-webkit-transition-delay":".5s"
        })
        $('.info').eq(index).addClass('show');
    }
};
function coverhide(cover){
    var title=cover.currentTrigger.find('.title'),
        index=$(".item").index(cover.currentTrigger);

    title.css({
        '-webkit-transform':'translateY(0px)'
    })
    $('.info').eq(index).css({
            "-webkit-transition-delay":"0s"
        })
    $('.info').eq(index).removeClass('show');
};
function covershown(cover){
    $('.close').show();
};
function coverhidden(){
    $('.close').hide();
};

</script>