jq实现简单的滑动解锁效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滑动解锁</title>
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.outer{
position: relative;
margin:20px auto;
width: 200px;
height: 30px;
line-height: 28px;
border:1px solid #ccc;
background: #ccc9c9;
}
.outer span,.filter-box,.inner{
position: absolute;
top: 0;
left: 0;
}
.outer span{
display: block;
padding:0 0 0 36px;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.filter-box{
width: 0;
height: 100%;
background: green;
z-index: 9;
}
.outer.act span{
padding:0 36px 0 0;
}
.inner{
width: 36px;
height: 28px;
text-align: center;
background: #fff;
cursor: pointer;
font-family: "宋体";
z-index: 10;
font-weight: bold;
color: #929292;
}
.outer.act .inner{
color: green;
}
.outer.act span{
z-index: 99;
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$(".inner").mousedown(function(e){
var el = $(".inner"),os = el.offset(),dx,$span=$(".outer>span"),$filter=$(".filter-box");
$(document).mousemove(function(e){
dx = e.pageX - os.left;
if(dx<0){
dx=0;
}else if(dx>162){
dx=162
}
$filter.css('width',dx);
el.css("left",dx);
});
$(document).mouseup(function(e){
$(document).off('mousemove');
dx = e.pageX - os.left;
if(dx<162){
dx=0;
$span.html("滑动解锁");
}else if(dx>=162){
dx=162;
$(".outer").addClass("act");
$span.html("验证通过！");
el.html('√')
}
$filter.css('width',dx);
el.css("left",dx)
})
})
})
</script>
</head>
<body>
<div class="outer">
<div class="filter-box"></div>
<span>
滑动解锁
</span>
<div class="inner">>></div>
</div>
</body>
</html>
jq实现简单的滑动解锁效果的更多相关文章
- css3实现渐变的iPhone滑动解锁效果
先贴代码 <!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; line ...
- HTML+CSS技术实现网页滑动门效果
一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...
- 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果
工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...
- javascript简单的滑动效果
利用setInterval实现简单的滑动效果 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- Swift: 打造滑动解锁文字动画
原文:Swift: 打造滑动解锁文字动画 最近木事,找出来玩了玩facebook的paper.到处都是那个"slide to unlock your phone"的效果啊.忽闪忽闪 ...
- Android实现滑动刻度尺效果，选择身高体重和生日
刻度尺效果虽然看起来很美,我个人认为很不实用,即使再不实用,也有用的,鉴于群里成员对我的苦苦哀求,我就分享一个他用不到的,横屏滑动刻度尺,因为他需要竖屏的,哈哈…… 最近群里的开发人员咨询怎样实现刻度 ...
- Android UI效果实现——Activity滑动退出效果
更新说明: 1.在QQ网友北京-旭的提醒下,在SlideFrame的initilize方法中添加了focusable.focusableInTouch.clickable的状态设置,否则会导致部分情况 ...
- jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
随机推荐
- Delphi下OpenGL2d绘图(06)-画图(多窗口、多视图、多个DC）
一.前言 在学习OpenGL的过程中,发现很多函数都是全局的.前面几章中都是在一个窗口DC中画图,那么要在多个窗口画图,需要怎么处理呢?网上方法有多种,这里采用其中一种,利用wglMakeCurren ...
- easyform表单校验插件改版源码
改动特性: 1.支持回调,可用于ajax提交 2.提示框样式修改,原版太丑,修改成bootstrap的popover 样式 原版还存在缺陷:被校验的表单元素设置不灵活,还得加上id.name 什么的 ...
- 工作中，ES6 可能掌握这些就足够了
刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速起飞. 接下来 ...
- WINFORM如何实现无聚焦框的Button按钮
当我们将一个button按钮设置如下属性时,总有一个聚焦框来困扰着我们 button1.FlatStyle = FlatStyle.Flat; 我们想要的效果是这样的: 但当使用了Tab切换焦点时 发 ...
- css的四种书写方式
优先级: 外部样式 < 内部样式表 < 内联样式表: 优先级,即:同名的选择器右边的会覆盖左边 1.内部样式表 <head> <style> /*内部样式表,一般用 ...
- C# 空合并运算符 ??
C#语言中,??运算符称为空合并运算符: a??b形式的空合并表达式要求a为可以为null的类型或引用类型.如果a为非null,则a??b的结果为a:否则,结果为b.仅当a为null时,该操作才计算b ...
- 多边形游戏（DP）
Description 多边形游戏是一个单人玩的游戏,开始时有一个由n个顶点构成的多边形.每个顶点被赋予一个整数值,每条边被赋予一个运算符 "+" 或 "*". ...
- nodejs初印象
初学Nodejs,特意在此记录学习过程,算是对这段时间的一个summary吧,相互勉励,共同进步嘛,Now Begin: 1.什么是nodejs nodejs 是一种基于事件驱动.非阻塞I/O模型,用 ...
- EF面试题
为什么用EF而不用原生的Ado.Net? 1.极大的提高开发效率:EF是微软自己的产品,跟VS拉法集成度比较好,开发中代码都是强类型的, xiefl代码效率非常高,自动化程度非常高,命令式的编程. 2 ...
- html全局属性(收藏)
HTML 属性赋予元素意义和语境. 下面的全局属性可用于任何 HTML 元素. 参考链接:http://www.w3school.com.cn/tags/html_ref_standardattrib ...