锁屏效果,也就是将屏幕置于模态,不允许用户触发任何动作,只能解除锁定后才能继续使用,jQueryUI的dialog有模态对话框,这一点不难做到。那么,首先需要在页面中添加一个div层,用于做模态的层:
<div id="overlay">
其对应的CSS比较简单,主要设置一下z-index属性,值设置的很大即可,就能达到覆盖其余元素的效果,加上opacity淡化一下背景:
#overlay{
height:100%;
min-width:1280px;
width:100%;
position:absolute;
left:0px;
top:0px;
background-color:#4d4d4d;
opacity:0.7;
z-index:100;
}
这样就有了一个覆盖页面之上的层,显示效果为:
下面是添加解除锁定的部分,我们模仿iphone解锁效果,那么需要添加一下:
<div id="slide">
<span id="slider"></span>
<span id="text">滑动解除锁定</span>
</div>
一个圆角矩形框,左侧是按钮图片,给出一个提示信息,难度不大:
#slide{
position:absolute;
top:75%;
width:52%;
left:24%;
height:86px;
border-radius:18px;
border:1px solid #2F368F;
border-bottom:1px groovy #2F368F;
z-index:101;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #2F368F),color-stop(1, #77D1F6));
opacity:0.9;
}
这里设置的z-index要比模态层大,这样我们才能操控到,没什么多说的。
#slider{
float:left;
position:relative;
cursor:pointer;
height:44px;
background: url(../images/arrow.png) no-repeat;
border-radius:16px;
margin:-5px;
text-align:center;
width: 146px;
height: 98px;
}
滑块中使用了图片,这样效果更好点,矩形框的宽度和滑块图片设置一致,margin等可以自行继续微调。下面是关键的text区域部分,这里使用的效果目前仅webkit内核支持,那么就是说FF暂时不支持该效果。
#text{
height:50px;
width:70%;
float:left;
padding-top:14px;
font-family:"微软雅黑";
font-size:44px;
font-weight:100;
text-align:center;
vertical-align: middle;
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));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
-webkit-text-size-adjust: none;
}
加上下面的动画:
@-webkit-keyframes slidetounlock {
0% {background-position: -200px 0;}
100%{background-position: 200px 0;}
}
我们模仿出的最后效果为:
图中文字部分动态高亮部门就是其它内核暂时不支持的部分了,这样我们的效果就完成了,此时都是静态的,什么操作也做不了,我们使用jqueryUI的draggable来添加动态效果:
$(function() {
var slideWidth=$("#slide").width();
$("#slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > slideWidth*0.7) {
$("#slide").fadeOut();
$("#overlay").fadeOut();
} else {
// do nothing
}
},
stop: function(event, ui) {
if (ui.position.left < slideWidth*0.7) {
$(this).animate({left: 0});
}
}
});
});
我们动态获取设置的slide宽度,然后应用draggable方法,设置横向拖动,并在拖动距离达到矩形长度的70%时,模态层和滑块消失,还原到页面中。那么我们就完成了给页面添加锁屏的效果了。
最后附上源码,希望对使用者有用。
- 大小: 26.8 KB
- 大小: 31.5 KB
分享到:
相关推荐
本代码是《疯狂HTML 5/CSS 3/JavaScript讲义》一书的配书光盘中的code文件夹,书中的代码按章、按节存放,比如第3章第2节所使用的代码放在codes文件夹的03\2.2文件夹下,依此类推。 书中每份源代码也给出与光盘...
这段时间我们已经陆续向大家分享了很多绚丽实用的HTML5/CSS3应用插件,今天,我从资料库中精选了7款最新出炉的HTML5/CSS3应用分享给大家,希望大家喜欢。 1、HTML5/CSS3发光文字 可自定义文字色彩 效果很赞 前几天我...
今天我们要分享一款非常有创意的HTML5/CSS3动画菜单,菜单是环形的,当鼠标点击中心按钮时,子菜单即会环绕展开,并伴随很酷的...记得之前还分享过一款HTML5/CSS3实现iOS Path菜单,也是环形的菜单,动画效果也比较酷。
之前我们分享过一款CSS3 3D文字特效HTML5/CSS3文字投影特效,加上投影和渐变,...今天我们再来分享一款很酷的HTML5/CSS3 3D文字特效,该文字特效的效果是鼠标滑过文字就会出现3D外翻的效果,非常不错的一款文字特效。
NULL 博文链接:https://sarin.iteye.com/blog/1184446
但@zougt/theme-css-extract-webpack-plugin另外一个功能是与html-webpack-plugin结合在 html 文件的 html 标签添加默认的 className,在开发模式下可能需要安装并使用# use npmnpm install -D @zougt/theme-css-...
http://fortawesome.github.io/Font-Awesome/ 可能网络问题,下载不了
常用的web开发手册都包含在里面的,有了它,不用找别的 了哦。
Bootstrap ACE后台管理模板 解决了ie7下font-awesome也能显示的问题 <html lang="en"> <meta charset="utf-8" /> 后台管理</title> ; stats" /> <meta name="viewport" content="width=device-width, ...
web前端开发,一本书带你学会Html5 css javascript。
nodejs系列学习:http请求html/css/js-----(二)
html5 css js 写的一个完整版本的音乐播放器,
1649-60套HTML5+CSS3后台管理登录模板
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
疯狂系列丛书中的 《疯狂HTML 5/CSS 3/javaScript》 书中涉及全部代码
在CSS3菜单栏目中,我们分享了很多...今天我们要分享一款HTML5/CSS3悬浮的自定义Select下拉菜单,这个CSS3菜单利用CSS3特性可以浮动在网页上,并带有阴影效果,同时,展开下拉框时会弹出一个二级菜单,效果非常不错。
HTML/CSS的大屏数据可视化集合案例源码(76+25套)数据可视化集合。 基于HTML/CSS/Echarts的会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合,76套数据可视化源码,25套数据可视化源码。数据都...
之前我们分享过一些基于CSS3和SVG的自行车动画,比如这款SVG/CSS3自行车 模拟自行车行驶动画和纯CSS3 3D自行车动画都非常炫酷。今天我们要给大家介绍另外一款基于SVG的3D镂空自行车骑行动画,与前面自行车动画不同的...
之前我介绍过几款漂亮的CSS3开关切换按钮,比如这款CSS3渲染Checkbox实现3D开关切换按钮就利用了CSS3和checkbox实现了开关切换...今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的,代码非常简单,3D效果也还可以。