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.     滑动解除锁定  
   4.   
   
       一个圆角矩形框，左侧是按钮图片，给出一个提示信息，难度不大： 
   

   Css代码  

   1. #slide{  
   2.     position:absolute;  
   3.     top:75%;  
   4.     width:52%;  
   5.     left:24%;  
   6.     height:86px;  
   7.     border-radius:18px;  
   8.     border:1px solid #2F368F;  
   9.     border-bottom:1px groovy #2F368F;  
   10.     z-index:101;  
   11.     background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #2F368F),color-stop(1, #77D1F6));   
   12.     opacity:0.9;  
   13. }  
   
       这里设置的z-index要比模态层大，这样我们才能操控到，没什么多说的。 
   

   Css代码  

   1. #slider{  
   2.     float:left;  
   3.     position:relative;  
   4.     cursor:pointer;  
   5.     height:44px;  
   6.     background: url(../images/arrow.png) no-repeat;  
   7.     border-radius:16px;  
   8.     margin:-5px;  
   9.     text-align:center;  
   10.     width: 146px;  
   11.     height: 98px;  
   12. }  
   
       滑块中使用了图片，这样效果更好点，矩形框的宽度和滑块图片设置一致，margin等可以自行继续微调。下面是关键的text区域部分，这里使用的效果目前仅webkit内核支持，那么就是说FF暂时不支持该效果。 
   

   Css代码  

   1. #text{  
   2.     height:50px;  
   3.     width:70%;  
   4.     float:left;  
   5.     padding-top:14px;  
   6.     font-family:"微软雅黑";  
   7.     font-size:44px;  
   8.     font-weight:100;  
   9.     text-align:center;  
   10.     vertical-align: middle;  
   11.     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));   
   12.     -webkit-background-clip: text;  
   13.     -webkit-text-fill-color: transparent;  
   14.     -webkit-animation: slidetounlock 5s infinite;  
   15.     -webkit-text-size-adjust: none;  
   16. }  
   
       加上下面的动画： 
   

   Css代码  

   1. @-webkit-keyframes slidetounlock {  
   2.     0% {background-position: -200px 0;}  
   3.     100%{background-position: 200px 0;}  
   4. }  
   
       我们模仿出的最后效果为： 
    
       图中文字部分动态高亮部门就是其它内核暂时不支持的部分了，这样我们的效果就完成了，此时都是静态的，什么操作也做不了，我们使用jqueryUI的draggable来添加动态效果： 
   

   Js代码  

   1. $(function() {  
   2.     var slideWidth=$("#slide").width();  
   3.     $("#slider").draggable({  
   4.         axis: 'x',  
   5.         containment: 'parent',  
   6.         drag: function(event, ui) {  
   7.             if (ui.position.left > slideWidth*0.7) {  
   8.                 $("#slide").fadeOut();  
   9.                 $("#overlay").fadeOut();  
   10.             } else {  
   11.                 // do nothing  
   12.             }  
   13.         },  
   14.         stop: function(event, ui) {  
   15.             if (ui.position.left 
   16.                 $(this).animate({left: 0});  
   17.             }  
   18.         }  
   19.     });       
   20. });  
   
       我们动态获取设置的slide宽度，然后应用draggable方法，设置横向拖动，并在拖动距离达到矩形长度的70%时，模态层和滑块消失，还原到页面中。那么我们就完成了给页面添加锁屏的效果了。 
       最后附上源码，希望对使用者有用。

2. backend.rar (151.8 KB)