zoukankan      html  css  js  c++  java
  • 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>
    人还是要有梦想的,万一实现了呢!
  • 相关阅读:
    Outline of the research(updated 8th,Aug)
    Similarity metrics(Updated Aug,8th)
    Experiments on the NYC dataset(updated 7th,Aug)
    Fused Matrix Factorization & some personal thoughts (Updated 1st,Aug,afternoon)
    Java——图片读取与存储
    Java——setBounds的用法以及居中的方式
    linux 常用命令整理----解压缩
    周一01.4安装PyCharm步骤
    周一01.2 计算机硬件&操作系统
    周一01.3Python多版本共存&pip环境变量设置
  • 原文地址:https://www.cnblogs.com/nannan1221/p/7994131.html
Copyright © 2011-2022 走看看