$(document).ready(function () {
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(window.slideVerifyPlug = factory());
}(this, (function () {
'use strict';
var SlideVerify = function (ele, opt) {
this.$ele = $(ele);
//默认参数
this.defaults = {
initText: '请按住滑块,拖动到最右边',
sucessText: '验证通过',
getSuccessState: function () {
}
}
this.settings = $.extend({}, this.defaults, opt);
this.touchX = 0;
this.slideFinishState = false;
this.init();
}
SlideVerify.prototype = {
constructor: SlideVerify,
init: function () {
var _this = this;
_this.initDom();
_this.initStyle();
_this.initEle();
_this._mousedown();
_this._mouseup();
_this._touchstart();
_this._touchmove();
_this._touchend();
},
initDom: function () {
var html = $(
'
' +
'
' +
'' +
'' +
'' +
this.settings.initText +
'' +
'' +
this.settings.sucessText +
'');
this.$ele.append(html);
},
initStyle: function () {
if (this.settings.wrapWidth) {
this.$ele.css({
'width': this.settings.wrapWidth
})
} else {
this.$ele.css({
'width': '100%'
})
}
},
initEle: function () {
this.slideBtn = this.$ele.find('.dragBtn');
this.slideProEle = this.$ele.find('.dragProgress');
this.slideSucMsgEle = this.$ele.find('.sucMsg');
this.slideFixTipsEle = this.$ele.find('.fixTips');
this.maxSlideWid = this.calSlideWidth();
},
_mousedown: function () {
var _this = this;
var ifThisMousedown = false;
_this.slideBtn.on('mousedown', function (e) {
var distenceX = e.pageX;
e.preventDefault();
if (_this.slideFinishState || _this.ifAnimated()) {
return false;
}
ifThisMousedown = true;
$(document).mousemove(function (e) {
if (!ifThisMousedown) {
return false;
}
var curX = e.pageX - distenceX;
if (curX >= _this.maxSlideWid) {
_this.setDragBtnSty(_this.maxSlideWid);
_this.setDragProgressSty(_this.maxSlideWid);
_this.cancelMouseMove();
_this.slideFinishState = true;
if (_this.settings.getSuccessState) {
_this.settings.getSuccessState(_this.slideFinishState);
}
_this.successSty();
} else if (curX <= 0) {
_this.setDragBtnSty('0');
_this.setDragProgressSty('0');
} else {
_this.setDragBtnSty(curX);
_this.setDragProgressSty(curX);
}
})
$(document).mouseup(function () {
if (!ifThisMousedown) {
return false;
}
ifThisMousedown = false;
if (_this.slideFinishState) {
_this.cancelMouseMove();
return false;
} else {
_this.failAnimate();
_this.cancelMouseMove();
}
});
})
},
_mouseup: function () {
},
_touchstart: function () {
var _this = this;
_this.slideBtn.on('touchstart', function (e) {
_this.touchX = e.originalEvent.targetTouches[0].pageX;
if (_this.slideFinishState || _this.ifAnimated()) {
// _this.cancelTouchmove();
return false;
}
})
},
_touchmove: function () {
var _this = this;
_this.slideBtn.on('touchmove', function (e) {
e.preventDefault();
var curX = e.originalEvent.targetTouches[0].pageX - _this.touchX;
if (curX >= _this.maxSlideWid) {
_this.setDragBtnSty(_this.maxSlideWid);
_this.setDragProgressSty(_this.maxSlideWid);
_this.cancelTouchmove();
_this.successSty();
_this.slideFinishState = true;
if (_this.settings.getSuccessState) {
_this.settings.getSuccessState(_this.slideFinishState);
}
_this.slideFinishState = true;
} else if (curX <= 0) {
_this.setDragBtnSty('0');
_this.setDragProgressSty('0');
} else {
_this.setDragBtnSty(curX);
_this.setDragProgressSty(curX);
}
})
},
_touchend: function () {
var _this = this;
_this.slideBtn.on('touchend', function () {
if (_this.slideFinishState) {
_this.cancelTouchmove();
return false;
} else {
_this.failAnimate();
}
})
},
getDragBtnWid: function () {//获取滑块的宽度,
return parseInt(this.slideBtn.width());
},
getDragWrapWid: function () {//获取 本容器的的宽度,以防万一
return parseFloat(this.$ele.outerWidth());
},
calSlideWidth: function () {
var _this = this;
return _this.getDragWrapWid() - _this.getDragBtnWid()
},
ifAnimated: function () {//判断 是否动画状态
return this.slideBtn.is(":animated")
},
getDragBtnLeft: function () { //判断当前 按钮 离左侧的距离
return this.slideBtn.css('left');
},
ifSlideRight: function () {
var _this = this;
if (parseInt(_this.getDragBtnLeft()) == parseInt(_this.calSlideWidth())) {
return true;
} else {
return false;
}
},
setDragBtnSty: function (left) {
this.slideBtn.css({
'left': left
})
},
setDragProgressSty: function (wid) {
this.slideProEle.css({
'width': wid
})
},
cancelMouseMove: function () {
$(document).off('mousemove');
},
cancelTouchmove: function () {
this.slideBtn.off('touchmove');
},
successSty: function () {
this.slideSucMsgEle.show();
this.slideBtn.addClass('suc-drag-btn');
},
failAnimate: function () {
this.slideBtn.animate({
'left': '-1px'
}, 200);
this.slideProEle.animate({
'width': 0
}, 200)
},
resetVerify: function () {
this.slideSucMsgEle.hide();
this.slideBtn.removeClass('suc-drag-btn');
this.slideFinishState = false;
this.slideProEle.css({
'width': 0
});
this.slideBtn.css({
'left': '-1px'
})
this._touchmove();
},
}
var inlineCss = '*{margin:0;padding:0;box-sizing:border-box}.verify-wrap{border-radius:6px;width:352px;height:40px;background-color:rgba(255,255,255,.05);border:1px solid #C2C9D1;margin:5px auto;position:relative}.verify-wrap .drag-btn{position:absolute;left:-1px;top:-1px; border-radius: 8px;width:60px;height:40px;background:#ECECEC url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAiCAYAAAApkEs2AAAA/UlEQVRYhe3XLc9GYBjG8eN6dkdFIQuqoCiCbj6ob2CCIplRaJKqEHT3c/kAz66Xc/fLnvO3UY7N/jNmxDAMF77AQ57iOH53x5/GccTPuyNUcSg1DqXGodQ4lNr/CC3LEsuyaG8mrEKzLEPXdZjnWWszYRXq+z7yPMc0Tej7XnkzYf2Muq6LoiiwrivatsV1XUrby0Mlx3Huu7fvO5qmUd50kL31QgijTdXD+gq/zvNEVVXwPA9pmipvOqxDj+O4Q4IgQJIkypsuq9Bt21DXNaIoug/VzYRVqHw55J0Kw1BrMyHkXyj/3BHiUGocSo1DqXEota8Jvb/18hP16Z7qL3h/w53n4AAAAABJRU5ErkJggg==) no-repeat center center;background-size:100% 100%;z-index:2;cursor:move;}.verify-wrap .suc-drag-btn{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAiCAYAAAApkEs2AAACA0lEQVRYhe2Y2yuDYRzHv7PJYc5zKspYSRMymStXu5NCs5W4csEfwJ+gSA53csg1F4R/gSu0OcWSmNIQkfMcEvu9tdpY79793leo91Nbbft993x6nj2/52kal8v1gX+Ajp4sFstve4jidrsR99sSUlFFlUYVVRpVVGl0SnyJ934VaxczOLpdwd3bufBeWnw+StLrYc1tQ3FqnewxZIk+vz9g7rAHO9dL3z67efXBfTkrPCqymtBqGkaiNoU9FnvpSXJyzx5R8itUQ7WU4cIWnT/qhe9xS3I91VKGC0uUfpPbV4uSajUhQ1CGshxYorRxpGDObECf1Ysm40DM2a+wNhPt7mhUZzvhMI1Aq9HBkFgUUzYSrBkNtiDCkGBES/Eg8pLKwiSdplFB8uRhEzMH3RGzsSC7j9oKe1CT4wi0oEZMeRzITy4XJOM0WkFy2uOE//1O7jA8UWrm1CeJ5dMxlGXYoI/PQrd5AQlavagkZTmwlt4UOHGCnPs9wkw+vl0jSZcWdSZDsz8uas1tD3t99rSL8b0W3Lz4cHy/LrrctYEjlQNr6Y2ptag0NIf10gv/Pvo3akRzlOGe++yTyV4yhAJ9leR6qqUMF7YoXTC6zPPChSMaVEO1ci4lstoTDdxROhE4Fjv/9jUvCIkoISPGv7nhq6JKo4oqjSqqNEIfpf8f/zqf+36643RPeo8AAAAASUVORK5CYII=) no-repeat center center;background-size:100% 100%}.verify-wrap .drag-progress{position:absolute;left:0;top:-1px;height:40px;border-top:1px solid #1DB23E;;border-top:1px solid #1DB23E;;width:0;background-color:#1DB23E;;color:#fff;font-size:18px;text-align:center;line-height:40px}.verify-wrap .fix-tips,.verify-msg{border-radius:6px;width:100%;position:absolute;right:0;left:1px;height:100%;color:rgba(0, 0, 0, 0.50);z-index:1;line-height:40px;font-size:15px;text-align:center}.verify-wrap .verify-msg{background-color:#1DB23E;;color:#fff;display:none}';
var styleObj = $(
''
)
$('head').prepend(styleObj);
var slideVerify = window.slideVerifyPlug || SlideVerify;
return slideVerify;
})));
})