jquery实现简单的滑动解锁，如下图展示分别是滑动解锁前和解锁后的两种效果：
解锁前：
解锁后：
附源码：（源码仅供参考）
?1 <!DOCTYPE html> ?2 <html> ?3 <head lang="en"> ?4 ????<meta charset="UTF-8"> ?5 ????<title>滑动解锁</title> ?6 ????<style> ?7 ????????*{ ?8 ????????????margin:0; ?9 ????????????padding: 0; 10 ????????????box-sizing: border-box; 11 ????????????-webkit-touch-callout: none; 12 ????????????-webkit-user-select: none; 13 ????????????-khtml-user-select: none; 14 ????????????-moz-user-select: none; 15 ????????????-ms-user-select: none; 16 ????????????user-select: none; 17 ????????} 18 ????????.outer{ 19 ????????????position: relative; 20 ????????????margin:20px auto; 21 ????????????width: 200px; 22 ????????????height: 30px; 23 ????????????line-height: 28px; 24 ????????????border:1px solid #ccc; 25 ????????????background: #ccc9c9; 26 ????????} 27 ????????.outer span,.filter-box,.inner{ 28 ????????????position: absolute; 29 ????????????top: 0; 30 ????????????left: 0; 31 ????????} 32 ????????.outer span{ 33 ????????????display: block; 34 ????????????padding:0 ?0 0 36px; 35 ????????????width: 100%; 36 ????????????height: 100%; 37 ????????????color: #fff; 38 ????????????text-align: center; 39 ????????} 40 ????????.filter-box{ 41 ????????????width: 0; 42 ????????????height: 100%; 43 ????????????background: green; 44 ????????????z-index: 9; 45 ????????} 46 ????????.outer.act span{ 47 ????????????padding:0 36px 0 0; 48 ????????} 49 ????????.inner{ 50 ????????????width: 36px; 51 ????????????height: 28px; 52 ????????????text-align: center; 53 ????????????background: #fff; 54 ????????????cursor: pointer; 55 ????????????font-family: "宋体"; 56 ????????????z-index: 10; 57 ????????????font-weight: bold; 58 ????????????color: #929292; 59 ????????} 60 ????????.outer.act .inner{ 61 ????????????color: green; 62 ????????} 63 ????????.outer.act span{ 64 ????????????z-index: 99; 65 ????????} 66 ????</style> 67 ????<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 68 ????<script> 69 ????????$(function(){ 70 ????????????$(".inner").mousedown(function(e){ 71 ????????????????var el = $(".inner"),os = el.offset(),dx,$span=$(".outer>span"),$filter=$(".filter-box"),_differ=$(".outer").width()-el.width(); 72 ????????????????$(document).mousemove(function(e){ 73 ????????????????????dx = e.pageX - os.left; 74 ????????????????????if(dx<0){ 75 ????????????????????????dx=0; 76 ????????????????????}else if(dx>_differ){ 77 ????????????????????????dx=_differ; 78 ????????????????????} 79 ????????????????????$filter.css(‘width‘,dx); 80 ????????????????????el.css("left",dx); 81 ????????????????}); 82 ????????????????$(document).mouseup(function(e){ 83 ????????????????????$(document).off(‘mousemove‘); 84 ????????????????????$(document).off(‘mouseup‘); 85 ????????????????????dx = e.pageX - os.left; 86 ????????????????????if(dx<_differ){ 87 ????????????????????????dx=0; 88 ????????????????????????$span.html("滑动解锁"); 89 ????????????????????}else if(dx>=_differ){ 90 ????????????????????????dx=_differ; 91 ????????????????????????$(".outer").addClass("act"); 92 ????????????????????????$span.html("验证通过！"); 93 ????????????????????????el.html(‘√‘); 94 ????????????????????} 95 ????????????????????$filter.css(‘width‘,dx); 96 ????????????????????el.css("left",dx); 97 ?98 ????????????????}) 99 ????????????})100 ????????})101 ????</script>102 </head>103 <body>104 ????<div class="outer">105 ????????<div class="filter-box"></div>106 ????????<span>107 ????????????滑动解锁108 ????????</span>109 ????????<div class="inner">>></div>110 ????</div>111 </body>112 </html>jquery实现简单的滑动解锁
原文地址：http://www.cnblogs.com/nannan1221/p/7994131.html