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('&radic;');
 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">&gt;&gt;</div>
110     </div>
111 </body>
112 </html>

转载于:https://www.cnblogs.com/nannan1221/p/7994131.html

jquery实现简单的滑动解锁相关推荐

原生简单实现滑动解锁，和滑动拼图解锁
简单实现滑动解锁,效果图是这样的 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
android自定义滑块解锁,使用Android自定义控件实现滑动解锁九宫格
本文概述: 滑动解锁九宫格的分析: 1.需要自定义控件: 2.需要重写事件onTouchEvent(); 3.需要给九个点设置序号和坐标,这里用Map类就行: 4.需要判断是否到滑到过九点之一,并存储 ...
jQuery实现滑动解锁
效果及代码如下 <!DOCTYPE html> <html> <head lang="en"><meta charset="UT ...
Selenium模拟JQuery滑动解锁
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...
python自动化滑动解锁_Python中Selenium模拟JQuery滑动解锁实例
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. 当我手动点击滑块时,改变的只是样式: 1.slide-to-unloc ...
c语言中穷竭算法,hihocoder#1054 : 滑动解锁（深度优先搜索）
描述滑动解锁是智能手机一项常用的功能.你需要在3x3的点阵上,从任意一个点开始,反复移动到一个尚未经过的"相邻"的点.这些划过的点所组成的有向折线,如果与预设的折线在图案.方向上 ...
android搜索框功能实现_Android实现滑动解锁功能
说到滑动解锁,就回到了2012~2014年,iPhone4S.5.5S年代,如今准备踏入2020年,这些年国产机崛起,再也不是公交车上都是iPhone4S的场景.本篇来使用ViewDragHelper ...
ViewDragHelper实战，实现滑动解锁
说到滑动解锁,就回到了2012~2014年,iPhone4S.5.5S年代,如今准备踏入2020年,这些年国产机崛起,再也不是公交车上都是iPhone4S的场景.本篇来使用ViewDragHelper ...
selenium登录QQ邮箱(附带滑动解锁)
前言最近因为工作需要用selenium做了一个QQ邮箱的爬虫(登录时部分帐号要滑动解锁),先简单记录一下. 这个问题先可以分为两个部分:1.登录帐号和2.滑动解锁.python版本3.5.4 问题 ...
html滑动解锁,js实现滑动解锁效能（PC+Moblie）
js实现滑动解锁功能(PC+Moblie) 实现效果: css样式代码略. html代码: 页面上导入了jquery.mobile .jquery Slide to confirm I am huma ...

jquery实现简单的滑动解锁

jquery实现简单的滑动解锁相关推荐

最新文章

热门文章