html实现滑动解锁_JQ实现简单的滑动解锁

开始状态

解锁状态

直接上代码：

滑动解锁

*{

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: 100;

}

滑动解锁

>>

$(function(){

$(".inner").mousedown(function(e){

var el = $(".inner"),os = el.offset(),dx,$span=$(".outer>span"),$filter=$(".filter-box"),_differ=$(".outer").width()-el.width();

$(document).mousemove(function(e){

dx = e.pageX - os.left;

if(dx<0){

dx=0;

}else if(dx>_differ){

dx=_differ;

}

$filter.css('width',dx);

el.css("left