$(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; }))); })