html+css+jQuery实现登录滑块拖动验证-问问十一

html+css+jQuery实现登录滑块拖动验证

的有关信息介绍如下：

html+css+jQuery实现登录滑块拖动验证

新建html文档。

书写hmtl代码。

验证结果：

参数：


$("#slider1").slider({
callback: function(result) {
$("#result1").text(result);
}
});

验证结果：

参数：


$("#slider2").slider({
width: 340, // width
height: 40, // height
sliderBg:"rgb(134, 134, 131)",// 滑块背景颜色
color:"#fff",// 文字颜色
fontSize: 14, // 文字大小
bgColor: "#33CC00", // 背景颜色
textMsg: "按住滑块，拖拽验证", // 提示文字
successMsg: "验证通过了哦", // 验证成功提示文字
successColor: "red", // 滑块验证成功提示文字颜色
time: 400, // 返回时间
callback: function(result) { // 回调函数，true(成功),false(失败)
$("#result2").text(result);
}
});

书写css样式代码。

body, div { margin: 0; padding: 0; }

.ui-slider-wrap { background: #e8e8e8; position: relative; }

.ui-slider-wrap .ui-slider-bg { width: 0; }

.ui-slider-wrap .ui-slider-btn { position: absolute; top: 0; left: 0; cursor: move; text-align: center; border: 1px solid #ccc; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

.ui-slider-wrap .ui-slider-btn { background: #fff url(../img/slider.png) no-repeat center; }

.ui-slider-wrap .ui-slider-btn.success { background-image: url(../img/success.png); }

.ui-slider-wrap .ui-slider-text { width: 100%; height: 100%; font-family: "微软雅黑"; text-align: center; position: absolute; top: 0; left: 0; color: #666; }

.ui-slider-wrap .ui-slider-no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }

button { display: inline-block; padding: 6px 12px; line-height: 1.4; text-align: center; border: 1px solid transparent; border-radius: 4px; color: #fff; background-color: #5bc0de; border-color: #46b8da; cursor: pointer; font-size: 15px; }

.container { width: 1080px; height: 600px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

.demo1 { width: 48%; height: 100%; float: left; padding: 20px; border: 1px dashed #fff; border-radius: 4px; box-sizing: border-box; position: relative; }

.demo2 { width: 48%; height: 100%; float: right; padding: 20px; border: 1px dashed #fff; border-radius: 4px; box-sizing: border-box; position: relative; }

.btns, .slider, .result { margin-bottom: 40px; }

pre { font-size: 13px; }

书写页面js。

书写jquery.slider.min.js。

'+'

'+this.opts.textMsg+"

"+'

'+'

'+"

";this.ele.html(t);this.initStatus()},initStatus:function(){var t=this;var i=this.ele;this.slider=i.find(".ui-slider-wrap");this.sliderBtn=i.find(".ui-slider-btn");this.bgColor=i.find(".ui-slider-bg");this.sliderText=i.find(".ui-slider-text");this.slider.css({width:t.opts.width,height:t.opts.height,backgroundColor:t.opts.sliderBg});this.sliderBtn.css({width:t.opts.height,height:t.opts.height,lineHeight:t.opts.height+"px"});this.bgColor.css({height:t.opts.height,backgroundColor:t.opts.bgColor});this.sliderText.css({lineHeight:t.opts.height+"px",fontSize:t.opts.fontSize,color:t.opts.color})},restore:function(){var t=this;var i=t.opts.time;this.result=false;this.initStatus();this.sliderBtn.removeClass("success").animate({left:0},i);this.bgColor.animate({width:0},i,function(){t.sliderText.text(t.opts.textMsg)})},eventBind:function(){var t=this;this.ele.on("mousedown",".ui-slider-btn",function(i){if(t.result){return}t.sliderMousedown(i)})},sliderMousedown:function(t){var i=this;var s=t.clientX;var e=s-this.sliderBtn.offset().left;i.sliderMousemove(s,e);i.sliderMouseup()},sliderMousemove:function(i,e){var l=this;t(s).on("mousemove.slider",function(t){l.sliderBtn_left=t.clientX-i-e;if(l.sliderBtn_left<0){return}if(l.sliderBtn_left>l.maxLeft){l.sliderBtn_left=l.maxLeft}l.sliderBtn.css("left",l.sliderBtn_left);l.bgColor.width(l.sliderBtn_left)})},sliderMouseup:function(){var i=this;t(s).on("mouseup.slider",function(){if(i.sliderBtn_left!=i.maxLeft){i.sliderBtn_left=0}else{i.ele.find(".ui-slider-text").text(i.opts.successMsg).css({color:i.opts.successColor});i.ele.find(".ui-slider-btn").addClass("success");i.result=true}i.sliderBtn.animate({left:i.sliderBtn_left},i.opts.time);i.bgColor.animate({width:i.sliderBtn_left},i.opts.time);t(this).off("mousemove.slider mouseup.slider");if(i.opts.callback&&typeof i.opts.callback==="function"){i.opts.callback(i.result)}})}};t.fn.slider=function(i){return this.each(function(){var s=t(this);var e=s.data("slider");if(!e){e=new l(s,i);s.data("slider",e)}if(typeof i==="string"){e[i]()}})}})(jQuery,window,document);

页面代码整体结构。是个js包网上可以下载。

查看效果。