jquery实现简单的滑动解锁
Posted 慕宣
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现简单的滑动解锁相关的知识，希望对你有一定的参考价值。
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实现简单的滑动解锁的主要内容，如果未能解决你的问题，请参考以下文章