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

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

Html代码  

1.   

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

Css代码  

1. #overlay{  
2.     height:100%;  
3.     min-width:1280px;  
4.     width:100%;  
5.     position:absolute;  
6.     left:0px;  
7.     top:0px;  
8.       
9.     opacity:0.7;  
10.         z-index:100;  
11. }  

    这样就有了一个覆盖页面之上的层，显示效果为： 
 
    下面是添加解除锁定的部分，我们模仿iphone解锁效果，那么需要添加一下： 

Html代码  

1.   
2.       
3.     滑动解除锁定  

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

CSS コード

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

float:left;

カーソル:pointer;

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

マージン:-5px;

幅: 146 ピクセル
}
スライダーの写真がスライダーで使用されるため、長方形のフレームの幅はスライダーの画像設定と一致し、余白は独自に微調整できます。以下はキー テキスト領域です。ここで使用されるエフェクトは現在 Webkit カーネルでのみサポートされています。つまり、FF は当面このエフェクトをサポートしません。
5. CSS コード
7. #text{
8. height:50px;
9. float:left;
font-family:「Microsoft Yahei」 ;
フォントサイズ: 44px;
フォントの重み: 100;
垂直方向の配置: 中央;

背景: -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: なし; }

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

シミュレートした最終的な効果は次のとおりです。

画像のテキスト部分の動的ハイライト部分は、現時点では他のカーネルではサポートされていない部分です。 このようにして、現時点での効果は完成です。すべて静的な操作は実行できません。動的効果を追加するには jqueryUI のドラッグ可能を使用します。


$(function() {

var slideWidth=$("#slide").width() ;
$（ "#slider"）.draggable（{
1. position.left＆gt; slidewidth*0.7）{event、ui）if（ui.position.left＆lt; slidewidth*0.7）{
$(this).animate({left: 0})
}
4. });
6. 設定されたスライド幅を動的に取得し、ドラッグ可能なメソッドを適用し、水平方向のドラッグを設定し、ドラッグしたときに距離が長方形の長さの 70% に達すると、モーダル レイヤーとスライダーが消え、ページの中央に戻ります。これで、ページへのロック画面効果の追加が完了しました。
最後に、ソースコードを添付します。ユーザーにとって役立つことを願っています。 CBackend.rar (151.8 kb)