仿支付寶滑塊驗證效果Jquery前端實作

仿支付寶滑塊驗證效果Jquery前端實作，在驗證成功時，在進行其他的操作，例如發送手機驗證碼或者其他，本文以驗證成功發送郵件為例。效果圖如下

代碼如下：

*{margin: 0px;padding: 0px;}
.sliding{width: 400px;height: 40px;margin: 50px auto;background:rgba(212, 212, 212, 1);text-align: center;line-height: 40px;position: relative;}
.sliding > p{width: 0px;height: 100%;position: absolute;top: 0;left: 0;background:#7BBB55;z-index: 99;color: #FFFFFF;text-align: center;overflow: hidden;}
.sliding > span{display: block;width: 46px;height: 100%;position: absolute;top: 0;left: 0;background-size: cover;cursor: pointer;z-index: 999;}
.span1_back{background: url(left.png) no-repeat center center;}
.span2_back{background: url(ok.png)no-repeat center center;}      

<div class="sliding">
    請按住滑塊，拖至最右側。
    <p></p>
    <span class="span1_back"></span>
</div>      

$(function(){
  $('.sliding > span').on('mousedown',function(ev){
    //擷取滑鼠摁下的位置
    var down_X=ev.clientX;
    //擷取p,span的寬度
    var p_W=$('.sliding > p').get(0).offsetWidth;
    var span_X=$('.sliding > span').get(0).offsetLeft;
    $(document).get(0).οnmοusemοve=function(ev){
      //擷取滑鼠移動的位置
      var move_X=ev.clientX;
      //用移動過後的位置減去滑鼠摁下的位置加上p的寬度或者 span 的left 值 因為倆者是同步的 是以 減去 其中一個就好
      var size = move_X - down_X + p_W;              
      if(size>0){// 移動的時候判斷size>0的時候執行，Math.min選取最小值，讓拖動過程中不至于超出
        size=Math.min(($('.sliding').get(0).offsetWidth - $('.sliding > span').get(0).offsetWidth),size);
      }else{
        //小于0的時候 size =0； 防止有無聊的使用者拖回 超出邊界
        size=0;
      }
      $('.sliding > p').css('width', size + 'px');
      $('.sliding > span').css('left', size + 'px');
      //防止拖拽過程中選中文字
      return false;
    }
    $(document).get(0).οnmοuseup=function(){
      //滑鼠松開執行,判段span到達邊界時候執行
      if(($('.sliding > span').get(0).offsetLeft) >= ($('.sliding').get(0).offsetWidth - $('.sliding > span').get(0).offsetWidth)){
        //更改span的背景圖檔
        $('.sliding > span').attr('class','span2_back');
        //更改p标簽中的内容
        $('.sliding > p').text('驗證通過');
        //驗證成功之後執行的方法
        successAfter();
        //删除滑鼠摁下方法防止使用者 無聊往回 推拽
        $('.sliding > span').off('mousedown');
      }else{
        //判斷沒到達邊界讓它再回到起點
        //利用jquery讓p 和 span 回到起始狀态
        $('.sliding > span').animate({left:'0px'},300);
        $('.sliding > p').animate({width:'0px'},300);
      }
      $(document).get(0).οnmοusemοve=null; //最後讓 滑鼠移動 和 滑鼠松開 事件停止 
      $(document).get(0).οnmοuseup=null;
    }
  })
});      

轉載于:https://www.cnblogs.com/yeshaoxiang/p/7852768.html