HTML5/CSS3 でロック画面効果の追加を実装_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:58:38

オリジナル

1513 人が閲覧しました

锁屏效果，也就是将屏幕置于模态，不允许用户触发任何动作，只能解除锁定后才能继续使用，jQueryUI的dialog有模态对话框，这一点不难做到。那么，首先需要在页面中添加一个div层，用于做模态的层：

Html代码

其对应的CSS比较简单，主要设置一下z-index属性，值设置的很大即可，就能达到覆盖其余元素的效果，加上opacity淡化一下背景：

Css代码

#overlay{
height:100%;
min-width:1280px;
width:100%;
position:absolute;
left:0px;
top:0px;
opacity:0.7;
z-index:100;
}

这样就有了一个覆盖页面之上的层，显示效果为：

下面是添加解除锁定的部分，我们模仿iphone解锁效果，那么需要添加一下：

Html代码

滑动解除锁定

左側にボタン画像のある丸い長方形のボックス。簡単なメッセージを表示します:

CSS コード

#slide{
Position:absolute; 5% ;
幅:52%;
高さ:18px;
ボーダー:1pxふ
z-index:101;
背景画像:-webkit-gradient(linear, 左上, 左下, color-stop(0, #2F368F),color-stop(1, #77D1F6)); :0.9;
}
ここで設定された z-index は、制御できるようにするため、これ以上言うことはありません。

float:left;

カーソル:pointer;

height:44px; : url(../images/arrow. png) 繰り返しなし;

マージン:-5px;

CSS コード
#text{
height:50px;
float:left;

背景: -webkit-gradient(線形、左上、右上)カラーストップ(0, #4d4d4d),カラーストップ(0.4, #4d4d4d),カラーストップ(0.5, 白),カラーストップ(0.6, #4d4d4d),カラーストップ(1, #4d4d4d)) ;

-webkit-background-clip: テキスト;

-webkit-text-fill-color: 透明;

-webkit-text-size-adjust: なし; }

次のアニメーションを追加します:
CSS コード
@-webkit-keyframes slidetounlock {
0% {background-position: -200px 0;}
100%{背景位置: 200px 0;}
}

$(function() {

position.left＆gt; slidewidth*0.7）{event、ui）if（ui.position.left＆lt; slidewidth*0.7）{
});
設定されたスライド幅を動的に取得し、ドラッグ可能なメソッドを適用し、水平方向のドラッグを設定し、ドラッグしたときに距離が長方形の長さの 70% に達すると、モーダルレイヤーとスライダーが消え、ページの中央に戻ります。これで、ページへのロック画面効果の追加が完了しました。