検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML5/CSS3 でロック画面効果の追加を実装_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:58:381545ブラウズ

 锁屏效果，也就是将屏幕置于模态，不允许用户触发任何动作，只能解除锁定后才能继续使用，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 は、制御できるようにするため、これ以上言うことはありません。
    12. CSS コード
    14. #slider{
float:left;

カーソル:pointer;

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

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

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

    画像のテキスト部分の動的ハイライト部分は、現時点では他のカーネルではサポートされていない部分です。 このようにして、現時点での効果は完成です。すべて静的な操作は実行できません。動的効果を追加するには 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）{
      3. $(this).animate({left: 0})
      4. }
    4. });
    6. 設定されたスライド幅を動的に取得し、ドラッグ可能なメソッドを適用し、水平方向のドラッグを設定し、ドラッグしたときに距離が長方形の長さの 70% に達すると、モーダル レイヤーとスライダーが消え、ページの中央に戻ります。これで、ページへのロック画面効果の追加が完了しました。
      7. 最後に、ソースコードを添付します。ユーザーにとって役立つことを願っています。 CBackend.rar (151.8 kb)
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Codeforces ラウンド #250 (ディビジョン 1) D セグメント Tree_html/css_WEB-ITnose次の記事：Codeforces ラウンド #250 (ディビジョン 1) D セグメント Tree_html/css_WEB-ITnose

関連記事

続きを見る