欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML5/CSS3实现添加锁屏效果_html/css_WEB-ITnose

程序员文章站 2024-04-03 17:18:04
...
锁屏效果,也就是将屏幕置于模态,不允许用户触发任何动作,只能解除锁定后才能继续使用,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. opacity:0.7;
    9. z-index:100;
    10. }

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

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

    Html代码

    1. 滑动解除锁定

一个圆角矩形框,左侧是按钮图片,给出一个提示信息,难度不大:

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%时,模态层和滑块消失,还原到页面中。那么我们就完成了给页面添加锁屏的效果了。
最后附上源码,希望对使用者有用。

  • backend.rar (151.8 KB)
  • HTML5/CSS3实现添加锁屏效果_html/css_WEB-ITnose

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    相关文章

    相关视频


    相关标签: 加锁 html5 css3 效果

    上一篇: 网页提供文件下载效能

    下一篇: MySQL数据库的概念_MySQL

    推荐阅读