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

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 < slideWidth*0.7) {
16. $(this).animate({left: 0});
17. }
18. }
19. });
20. });

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

backend.rar (151.8 KB)