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 ...
随机推荐
- JDK1.7新特性(4):java语言动态性之反射API
直接通过一个代码示例来熟悉java中通过反射来对构造函数/域以及方法处理的相关API: package com.rampage.jdk7.chapter2; import java.lang.refl ...
- 推荐网站 explainshell.com
ls 显示指定目录下的文件和目录,默认为当前目录. -a 显示所有文件及目录 (ls内定将文件名或目录名称开头为"."的视为隐藏档,不会列出) -l 除文件名称外,亦将文件型态.权 ...
- C# 泛型使用笔记
泛型的基本概念我就不在这重复了,不了解的同学请自行百度. 我主要写下我在项目中要到的泛型实例.献丑了.....有什么不好或不对的地方大家尽可评论留言. 为什么要用泛型? 通过使用泛型,我们可以极大地提 ...
- 你所需要的sql数据库资料
sql语法的特点 1.没有"",所有的字符串都使用''包含 2.它的逻辑相等与赋值运算符一样都是= 如 if 1=1 3.不区别大小写,但是习惯函数上使用大写.所有与数据库 ...
- [PHP] 从PHP 5.6.x 移植到 PHP 7.0.x不兼容点
1.错误和异常处理 1.1 set_exception_handler()函数申明的类型 function handler($e){ var_dump($e); } set_exception_han ...
- digester解析xml文件
在我们的项目中或多或少会采用xml来做配置文件,你可以采用Java原生支持的sax.DOM或者第三方的dom4j等.虽然提供了各式各样的解析方式,但是解析一个复杂的xml所编写的Java代码是非常麻烦 ...
- MySQL：SQL进阶
一.数据库相关理论 1.系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等performance_s ...
- 简易搭建git仓库、关联远程和本地仓库方法。克隆仓库方法。同一台电脑上创建两个git ssh key方法。
一,在github上建仓库 react-js-antd-demo: 二:将远程仓库与本地仓库关联 git remote add origin git@github.com:begin256/react ...
- vue2.0 学习 ，开始学习
先看官网的介绍上面的教程 https://cn.vuejs.org/v2/guide/ 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子.你可以在浏览器新标签 ...
- MySQL数据库(11)----使用子查询实现多表查询
子查询指的是用括号括起来,并嵌入另一条语句里的那条 SELECT 语句.下面有一个示例,它实现的是找出与考试类别('T')相对应的所有考试事件行的 ID,然后利用它们来查找那些考试的成绩: SELEC ...