HTML5/CSS3實現添加鎖屏效果

 鎖屏效果，也就是將屏幕置於模態，不允許用戶觸發任何動作，只能解除鎖定后才能繼續使用，jQueryUI的dialog有模態對話框，這一點不難做到。那么，首先需要在頁面中添加一個div層，用於做模態的層： 

<div id="overlay">

    其對應的CSS比較簡單，主要設置一下z-index屬性，值設置的很大即可，就能達到覆蓋其余元素的效果，加上opacity淡化一下背景： 

#overlay{
    height:100%;
    min-width:1280px;
    width:100%;
    position:absolute;
    left:0px;
    top:0px;

    opacity:0.7;
        z-index:100;
}

    這樣就有了一個覆蓋頁面之上的層，顯示效果為： 
 
    下面是添加解除鎖定的部分，我們模仿iphone解鎖效果，那么需要添加一下： 

<div id="slide">
    <span id="slider"></span>
    <span id="text">滑動解除鎖定</span>
</div>

    一個圓角矩形框，左側是按鈕圖片，給出一個提示信息，難度不大： 

#slide{
    position:absolute;
    top:75%;
    width:52%;
    left:24%;
    height:86px;
    border-radius:18px;
    border:1px solid #2F368F;
    border-bottom:1px groovy #2F368F;
    z-index:101;
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #2F368F),color-stop(1, #77D1F6));
    opacity:0.9;
}

    這里設置的z-index要比模態層大，這樣我們才能操控到，沒什么多說的。 

#slider{
    float:left;
    position:relative;
    cursor:pointer;
    height:44px;
    background: url(../images/arrow.png) no-repeat;
    border-radius:16px;
    margin:-5px;
    text-align:center;
    width: 146px;
    height: 98px;
}

    滑塊中使用了圖片，這樣效果更好點，矩形框的寬度和滑塊圖片設置一致，margin等可以自行繼續微調。下面是關鍵的text區域部分，這里使用的效果目前僅webkit內核支持，那么就是說FF暫時不支持該效果。 

#text{
    height:50px;
    width:70%;
    float:left;
    padding-top:14px;
    font-family:"微軟雅黑";
    font-size:44px;
    font-weight:100;
    text-align:center;
    vertical-align: middle;
    background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: slidetounlock 5s infinite;
    -webkit-text-size-adjust: none;
}

    加上下面的動畫： 

@-webkit-keyframes slidetounlock {
    0% {background-position: -200px 0;}
    100%{background-position: 200px 0;}
}

    我們模仿出的最后效果為： 
 
    圖中文字部分動態高亮部門就是其它內核暫時不支持的部分了，這樣我們的效果就完成了，此時都是靜態的，什么操作也做不了，我們使用jqueryUI的draggable來添加動態效果： 

$(function() {
    var slideWidth=$("#slide").width();
    $("#slider").draggable({
        axis: 'x',
        containment: 'parent',
        drag: function(event, ui) {
            if (ui.position.left > slideWidth*0.7) {
                $("#slide").fadeOut();
                $("#overlay").fadeOut();
            } else {
                // do nothing
            }
        },
        stop: function(event, ui) {
            if (ui.position.left < slideWidth*0.7) {
                $(this).animate({left: 0});
            }
        }
    });
});

    我們動態獲取設置的slide寬度，然后應用draggable方法，設置橫向拖動，並在拖動距離達到矩形長度的70%時，模態層和滑塊消失，還原到頁面中。那么我們就完成了給頁面添加鎖屏的效果了。 
    最后附上源碼，希望對使用者有用。

• backend.rar (151.8 KB)