更新时间:2018/9/4 17:24:54
更新说明:本次更新增加了支持移动端的验证控件
样式1(仅支持PC端)
//初始验证 function SlideCheckFail() { $(".outer").removeClass("act"); $(".inner").css("left", 0); $(".inner").html(">>"); $(".filter-box").css('width', 0); $(".outer>span").html("按住滑块,拖拽到最右边"); $("#CaptchaID").val("0"); $(".outer span").addClass("txtRoll"); } //验证成功 function SlideCheckSuccess(dx) { $(".outer").addClass("act"); $(".outer>span").html("验证通过!"); $(".inner").html('√'); $(".inner").css("left", dx); $(".filter-box").css('width', dx); $("#CaptchaID").val("1"); $(".outer span").removeClass("txtRoll"); }
样式2(支持移动端和PC端)
首先需要初始化"slider"
//初始化 var slider = new SliderUnlock("#slider", { successLabelTip: "验证成功" }, function() { //验证成功 $("#label").html('√'); $("#label").css('color', 'green'); $("#labelTip").removeClass("txtRoll"); $("#CaptchaID2").val("1"); });
初始化验证需要调用slider的两个方法
slider.init(); slider.reset();
ie下不支持文字颜色滚动效果,其它正常
//初始验证 function SlideCheckFail() { $(".outer").removeClass("act"); $(".inner").css("left", 0); $(".inner").html(">>"); $(".filter-box").css('width', 0); $(".outer>span").html("按住滑块,拖拽到最右边"); $("#CaptchaID").val("0"); $(".outer span").addClass("txtRoll"); } //验证成功 function SlideCheckSuccess(dx) { $(".outer").addClass("act"); $(".outer>span").html("验证通过!"); $(".inner").html('√'); $(".inner").css("left", dx); $(".filter-box").css('width', dx); $("#CaptchaID").val("1"); $(".outer span").removeClass("txtRoll"); }