アリペイスライダ検証コード効果を模倣した携帯電話端末実現

検証機能を強化するため、アプリの攻撃を減らす.隊長は支付宝のスライダを作って効果を検証するように要求した.外観とユーザー体験に優れているほか、セキュリティは低下せず、ユーザーの行動の分析によってセキュリティチェックが保証されています.
多くのケースを検索することでPC側の展示効果があり、携帯電話側では友好的に展示できません.そこでCSNDブロガーの文章を参考にいくつかの修正を行いました.
原文リンクCSDN-擬支付宝スライダ検証コード効果の先端実現
効果図を表示:
スライダ効果の先端が実現します.主な内容は、スライダフロントエンドスタイル(htmlレイアウト)、スライダのフラッシュ移動効果(CSS 3アニメーション)、スライダスライドスクリプトの作成(javascript押して、ドラッグして、イベントの作成から離れます.)です.
備考:本例のHTML、CSSは変更されておらず、JSの修正のみである.
HTMlコード

    
    
    
    
    
    



    

        

        

                 ，      
        
        

    


    

    $('#drag').drag();

CSSコード

#drag{
    position: relative;
    background-color: #e8e8e8;
    width: 300px;
    height: 34px;
    line-height: 34px;
    text-align: center;
}
#drag .handler{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40px;
    height: 32px;
    border: 1px solid #ccc;
    cursor: move;
}
.handler_bg{
    background: #fff url("../img/slider.png") no-repeat center;
}
.handler_ok_bg{
    background: #fff url("../img/complet.png") no-repeat center;
}
#drag .drag_bg{
    background-color: #7ac23c;
    height: 34px;
    width: 0px;
}
#drag .drag_text{
    position: absolute;
    top: 0px;
    width: 300px;
    color:#9c9c9c;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select:none;
    -ms-user-select:none;
    font-size: 12px;        //  add
}

JSコード
備考:本例のHTML、CSSは変更されておらず、JSの修正のみである.
1、マウスを押して、移動して、イベントを放して、押してスタートして、押して移動して、押して終了します2、指が要素の上に置かれている位置を定義して、pageX 3を取得して、イベントバインドoff()をキャンセルします

$.fn.drag = function(options) {
    var x, drag = this, isMove = false, defaults = {
    };
    var options = $.extend(defaults, options);
    var handler = drag.find('.handler');
    var drag_bg = drag.find('.drag_bg');
    var text = drag.find('.drag_text');
    var maxWidth = drag.width() - handler.width();  //        

    //       x    
    handler.on('touchstart',function(e) {
        e.preventDefault();
        isMove = true;
        var _touch = e.originalEvent.targetTouches[0];//             
        x = _touch.pageX - parseInt(handler.css('left'), 10);

    })
    //      ，      0      ，  x           
    .on('touchmove',function(e) {
            e.preventDefault();
            var _touch = e.originalEvent.changedTouches[0];
            var _x = _touch.pageX - x;// _x = e.pageX - (e.pageX - parseInt(handler.css('left'), 10)) = x
            if (isMove) {
            if (_x > 0 && _x <= maxWidth) {
                handler.css({'left': _x});
                drag_bg.css({'width': _x});
            } else if (_x > maxWidth) {  //                 
                dragOk();
            }
        }
    })
    //       ，    
    .on('touchend', function(e) {
            e.preventDefault();
            isMove = false;
            var _touch = e.originalEvent.changedTouches[0];
            var _x = _touch.pageX - x;
            if (_x < maxWidth) { //     ，            ，         
            handler.css({'left': 0});
            drag_bg.css({'width': 0});
        }
    });

    //    
    function dragOk() {
        handler.removeClass('handler_bg').addClass('handler_ok_bg');
        text.removeClass('slidetounlock').text('    ').css({'color':'#fff'});       //modify
        // drag.css({'color': '#fff !important'});

        handler.css({'left': maxWidth});                   // add
        drag_bg.css({'width': maxWidth});                  // add

        //         
        handler.off('touchstart');
        handler.off('touchmove');
        handler.off('touchend');
    }
};    

問題があれば、皆さんの交流と指摘を歓迎します.QQ:1357912285