码迷,mamicode.com
首页 > Web开发 > 详细

HTML5/CSS3实现添加锁屏效果

时间:2014-09-02 09:02:44      阅读:454      评论:0      收藏:0      [点我收藏+]

标签:blog   http   color   os   io   使用   ar   art   div   

 锁屏效果,也就是将屏幕置于模态,不允许用户触发任何动作,只能解除锁定后才能继续使用,jQueryUI的dialog有模态对话框,这一点不难做到。那么,首先需要在页面中添加一个div层,用于做模态的层: 
Html代码  bubuko.com,布布扣
  1. <div id="overlay">  

    其对应的CSS比较简单,主要设置一下z-index属性,值设置的很大即可,就能达到覆盖其余元素的效果,加上opacity淡化一下背景: 
Css代码  bubuko.com,布布扣
  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. }  

    这样就有了一个覆盖页面之上的层,显示效果为: 
bubuko.com,布布扣 
    下面是添加解除锁定的部分,我们模仿iphone解锁效果,那么需要添加一下: 
Html代码  bubuko.com,布布扣
  1. <div id="slide">  
  2.     <span id="slider"></span>  
  3.     <span id="text">滑动解除锁定</span>  
  4. </div>  

    一个圆角矩形框,左侧是按钮图片,给出一个提示信息,难度不大: 
Css代码  bubuko.com,布布扣
  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代码  bubuko.com,布布扣
  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代码  bubuko.com,布布扣
  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代码  bubuko.com,布布扣
  1. @-webkit-keyframes slidetounlock {  
  2.     0% {background-position: -200px 0;}  
  3.     100%{background-position: 200px 0;}  
  4. }  

    我们模仿出的最后效果为: 
bubuko.com,布布扣 
    图中文字部分动态高亮部门就是其它内核暂时不支持的部分了,这样我们的效果就完成了,此时都是静态的,什么操作也做不了,我们使用jqueryUI的draggable来添加动态效果: 
Js代码  bubuko.com,布布扣
  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 < slideWidth*0.7) {  
  16.                 $(this).animate({left: 0});  
  17.             }  
  18.         }  
  19.     });       
  20. });  

    我们动态获取设置的slide宽度,然后应用draggable方法,设置横向拖动,并在拖动距离达到矩形长度的70%时,模态层和滑块消失,还原到页面中。那么我们就完成了给页面添加锁屏的效果了。 
    最后附上源码,希望对使用者有用。

HTML5/CSS3实现添加锁屏效果

标签:blog   http   color   os   io   使用   ar   art   div   

原文地址:http://www.cnblogs.com/ranzige/p/3950682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!