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="js/jquery-1.11.3.min.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");
  72.                 $(document).mousemove(function(e){
  73.                     dx = e.pageX - os.left;
  74.                     if(dx<0){
  75.                         dx=0;
  76.                     }else if(dx>162){
  77.                         dx=162
  78.                     }
  79.                     $filter.css('width',dx);
  80.                     el.css("left",dx);
  81.                 });
  82.                 $(document).mouseup(function(e){
  83.                     $(document).off('mousemove');
  84.                     dx = e.pageX - os.left;
  85.                     if(dx<162){
  86.                         dx=0;
  87.                         $span.html("滑动解锁");
  88.                     }else if(dx>=162){
  89.                         dx=162;
  90.                         $(".outer").addClass("act");
  91.                         $span.html("验证通过！");
  92.                         el.html('&radic;')
  93.                     }
  94.                     $filter.css('width',dx);
  95.                     el.css("left",dx)
  96.                 })
  97.             })
  98.         })
  99.     </script>
  100. </head>
  101. <body>
  102.     <div class="outer">
  103.         <div class="filter-box"></div>
  104.         <span>
  105.             滑动解锁
  106.         </span>
  107.         <div class="inner">&gt;&gt;</div>
  108.     </div>
  109. </body>
  110. </html>

jq实现简单的滑动解锁效果的更多相关文章

  1. css3实现渐变的iPhone滑动解锁效果

    先贴代码 <!DOCTYPE html> <html> <head> <style> p{ width:50%; margin:0 auto; line ...

  2. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  3. 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  4. javascript简单的滑动效果

    利用setInterval实现简单的滑动效果 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  6. Swift: 打造滑动解锁文字动画

    原文:Swift: 打造滑动解锁文字动画 最近木事,找出来玩了玩facebook的paper.到处都是那个"slide to unlock your phone"的效果啊.忽闪忽闪 ...

  7. Android实现滑动刻度尺效果，选择身高体重和生日

    刻度尺效果虽然看起来很美,我个人认为很不实用,即使再不实用,也有用的,鉴于群里成员对我的苦苦哀求,我就分享一个他用不到的,横屏滑动刻度尺,因为他需要竖屏的,哈哈…… 最近群里的开发人员咨询怎样实现刻度 ...

  8. Android UI效果实现——Activity滑动退出效果

    更新说明: 1.在QQ网友北京-旭的提醒下,在SlideFrame的initilize方法中添加了focusable.focusableInTouch.clickable的状态设置,否则会导致部分情况 ...

  9. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

随机推荐

  1. 找到链表中倒数第k个数

    本文来源于翁舒航的博客,点击即可跳转原文观看!!!(被转载或者拷贝走的内容可能缺失图片.视频等原文的内容) 若网站将链接屏蔽,可直接拷贝原文链接到地址栏跳转观看,原文链接:https://www.cn ...

  2. MyBatis学习(三)---MyBatis和Spring整合

    想要了解MyBatis基础的朋友可以通过传送门: MyBatis学习(一)---配置文件,Mapper接口和动态SQL http://www.cnblogs.com/ghq120/p/8322302. ...

  3. jquery replace方法去空格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. H5上滑跳转页面

    方法一: jquery方法 movePage($('body')); function movePage(dom) { var startY, moveY, moveSpave; dom.on(&qu ...

  5. Luogu 4240：毒瘤之神的考验

    传送门 Sol 分开考虑 \(\varphi(ij)\) 中 \(ij\) 的质因子 那么 \[\varphi(ij)=\frac{\varphi(i)\varphi(j)gcd(i,j)}{\var ...

  6. JavaScript访问对象的属性和方法

    对象的属性和方法统称为对象的成员. 访问对象的属性 在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性. 二者区别:“ . ”表示法一般作为静态对象使用时来存取属性.而“[ ...

  7. Nodejs + express post get 参数获取小结

    req.params.xxxxx 从path中的变量 req.query.xxxxx 从get中的?xxxx=中 req.body.xxxxx 从post中的变量 Post下别忘了: app.use( ...

  8. MySQL中有关char、varchar、int、tinyint、decimal

    char.varchar属于字符串类型 1.char属于定长,能确切的知道列值的长度,也就是有多少个字符.当指定char(5)时,表示只能存5个字符,如5个英文‘a’,5个汉字‘我’,5个符号‘&am ...

  9. 个人项目-wordcount

    源代码上传到github的网址为:https://github.com/fancy-dawning/hello-world.git. wc.exe是一个常见的工具,它能统计文本文件的字符数,单词数和行 ...

  10. vue学习（一）、Vue.js简介

    Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...