滑块验证

1.
                  <input type="password" class="form-control login-password" placeholder="请输入密码"/>
                    <div class="form-group" id="form-validate">
                           <div id="dragContainer">
                                <div id="dragBg"></div>
                                <div id="dragText"></div>
                                <div id="dragHandler" class="dragHandlerBg"></div>
                          </div>
                    </div>
                    <button class="btn-submit btn-login" disabled>登陆</button>
重要的是中间 “form-validate” ,用来显示滑块的

/* 滑动控件容器,亮灰色背景 */
#form-validate{
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}
#form-validate.active{
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 10;
}
#dragContainer {
    position: relative;
    display: inline-block;
    background: #e8e8e8;
    width: 340px;
    height: 44px;
    border: 2px solid #e8e8e8;
}
/* 滑块左边部分,绿色背景 */
#dragBg {
    position: absolute;
    background-color: #7ac23c;
    width: 0px;
    height: 100%;
}
/* 滑动验证容器文本 */
#dragText {
    position: absolute;
    width: 100%;
    height: 100%;
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
    line-height: 40px;
    /* 文本不允许选中 */
    user-select: none;
    -webkit-user-select: none;
}
/* 滑块 */
#dragHandler {
    position: absolute;
    width: 40px;
    height: 100%;
    cursor: move;
}
/* 滑块初始背景 */
.dragHandlerBg {
    background: #fff no-repeat center url(“img");
}
/* 验证成功时的滑块背景 */
.dragHandlerOkBg {
    background: #fff no-repeat center url("img");
}

2. 通过js判断

if(!device.mobile()){
    (function() {
        var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
        // Main
        initHeader();
        initAnimation();
        addListeners();
    
        function initHeader() {
            width = window.document.documentElement.clientWidth;
            height = window.document.documentElement.clientHeight;
            target = {x: