#slider {margin: 100px auto;width: 300px;height: 40px;position: relative;border-radius: 2px;background-color: #dae2d0;overflow: hidden;text-align: center;user-select: none;-moz-user-select: none;-webkit-user-select: none;
}#slider_bg {position: absolute;left: 0;top: 0;height: 100%;background-color: #7AC23C;z-index: 1;
}#label {width: 46px;position: absolute;left: 0;top: 0;height: 38px;line-height: 38px;border: 1px solid #cccccc;background: #fff;z-index: 3;cursor: move;color: #ff9e77;font-size: 16px;font-weight: 900;
}#labelTip {position: absolute;left: 0;width: 100%;height: 100%;font-size: 13px;font-family: 'Microsoft Yahei', serif;color: #787878;line-height: 38px;text-align: center;z-index: 2;
}

/*** jquery plugin -- jquery.slideunlock.js* Description: a slideunlock plugin based on jQuery* Version: 1.1* Author: Dong Yuhao* www.sucaijiayuan.com* created: March 27, 2016*/;(function ($,window,document,undefined) {function SliderUnlock(elm, options, success){var me = this;var $elm = me.checkElm(elm) ? $(elm) : $;success = me.checkFn(success) ? success : function(){};var opts = {successLabelTip:  "Successfully Verified",duration:  200,swipestart:  false,min:  0,max:  $elm.width(),index:  0,IsOk:  false,lableIndex:  0};opts = $.extend(opts, options||{});//$elmme.elm = $elm;//optsme.opts = opts;//是否开始滑动me.swipestart = opts.swipestart;//最小值me.min = opts.min;//最大值me.max = opts.max;//当前滑动条所处的位置me.index = opts.index;//是否滑动成功me.isOk = opts.isOk;//滑块宽度me.labelWidth = me.elm.find('#label').width();//滑块背景me.sliderBg = me.elm.find('#slider_bg');//鼠标在滑动按钮的位置me.lableIndex = opts.lableIndex;//successme.success = success;}SliderUnlock.prototype.init = function () {var me = this;me.updateView();me.elm.find("#label").on("mousedown", function (event) {var e = event || window.event;me.lableIndex = e.clientX - this.offsetLeft;me.handerIn();}).on("mousemove", function (event) {me.handerMove(event);}).on("mouseup", function (event) {me.handerOut();}).on("mouseout", function (event) {me.handerOut();}).on("touchstart", function (event) {var e = event || window.event;me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;me.handerIn();}).on("touchmove", function (event) {me.handerMove(event, "mobile");}).on("touchend", function (event) {me.handerOut();});};/*** 鼠标/手指接触滑动按钮*/SliderUnlock.prototype.handerIn = function () {var me = this;me.swipestart = true;me.min = 0;me.max = me.elm.width();};/*** 鼠标/手指移出*/SliderUnlock.prototype.handerOut = function () {var me = this;//停止me.swipestart = false;//me.move();if (me.index < me.max) {me.reset();}};/*** 鼠标/手指移动* @param event* @param type*/SliderUnlock.prototype.handerMove = function (event, type) {var me = this;if (me.swipestart) {event.preventDefault();event = event || window.event;if (type == "mobile") {me.index = event.originalEvent.touches[0].pageX - me.lableIndex;} else {me.index = event.clientX - me.lableIndex;}me.move();}};/*** 鼠标/手指移动过程*/SliderUnlock.prototype.move = function () {var me = this;if ((me.index + me.labelWidth) >= me.max) {me.index = me.max - me.labelWidth -2;//停止me.swipestart = false;//解锁me.isOk = true;}if (me.index < 0) {me.index = me.min;//未解锁me.isOk = false;}if (me.index+me.labelWidth+2 == me.max && me.max > 0 && me.isOk) {//解锁默认操作$('#label').unbind().next('#labelTip').text(me.opts.successLabelTip).css({'color': '#fff'});me.success();}me.updateView();};/*** 更新视图*/SliderUnlock.prototype.updateView = function () {var me = this;me.sliderBg.css('width', me.index);me.elm.find("#label").css("left", me.index + "px")};/*** 重置slide的起点*/SliderUnlock.prototype.reset = function () {var me = this;me.index = 0;me.sliderBg .animate({'width':0},me.opts.duration);me.elm.find("#label").animate({left: me.index}, me.opts.duration).next("#lableTip").animate({opacity: 1}, me.opts.duration);me.updateView();};/*** 检测元素是否存在* @param elm* @returns {boolean}*/SliderUnlock.prototype.checkElm = function (elm) {if($(elm).length > 0){return true;}else{throw "this element does not exist.";}};/*** 检测传入参数是否是function* @param fn* @returns {boolean}*/SliderUnlock.prototype.checkFn = function (fn) {if(typeof fn === "function"){return true;}else{throw "the param is not a function.";}};window['SliderUnlock'] = SliderUnlock;
})(jQuery, window, document);