html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用

onSuccess: function () {alert('验证通过!');}});disk/：body {overflow-x: hidden;}.block {position: absolute;left: 0;top: 0;}.sliderContainer {position: relative;text-align: center;line-height: 40px;background: #f7f9fa;color: #45494c;border-radius: 2px;}.sliderbg {position: absolute;left: 0;right: 0;top: 0;background-color: #f7f9fa;height: 40px;border-radius: 2px;border: 1px solid #e6e8eb;}.sliderContainer_active .slider {top: -1px;border: 1px solid #1991FA;

}.sliderContainer_active .sliderMask {border-width: 1px 0 1px 1px;}.sliderContainer_success .slider {top: -1px;border: 1px solid #52CCBA;background-color: #52CCBA !important;}.sliderContainer_success .sliderMask {border: 1px solid #52CCBA;border-width: 1px 0 1px 1px;background-color: #D2F4EF;}.sliderContainer_success .sliderIcon:before {content: "f00c";}.sliderContainer_fail .slider {top: -1px;border: 1px solid #f57a7a;background-color: #f57a7a !important;}.sliderContainer_fail .sliderMask {border: 1px solid #f57a7a;background-color: #fce1e1;border-width: 1px 0 1px 1px;}.sliderContainer_fail .sliderIcon:before {content: "f00d";}.sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {display: none;}.sliderMask {

position: absolute;left: 0;top: 0;height: 40px;border: 0 solid #1991FA;background: #D1E9FE;border-radius: 2px;}.slider {position: absolute;top: 0;left: 0;width: 40px;height: 40px;background: #fff;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);cursor: pointer;transition: background .2s linear;border-radius: 2px;display: flex;align-items: center;justify-content: center;}.slider:hover {background: #1991FA;}.slider:hover .sliderIcon {background-position: 0 -13px;}.sliderText {position: relative;}.sliderIcon {}

barText: '向右滑动填充拼图',repeatIcon: 'fa fa-repeat',maxLoadCount: 3,localImages: function () {return 'images/Pic' + (() * 4) + '.jpg';}};function Plugin(option) {return (function () {var $this = $(this);var data = $('Captcha');var options = typeof option === 'object' && option;if (data && !/reset/.test(option)) return;if (!data) $('Captcha', data = new SliderCaptcha(this, options));if (typeof option === 'string') data[option]();});}$.Captcha = Plugin;$.uctor = SliderCaptcha;var _proto = ype;_ = function () {M();g();ents();};_M = function () {var createElement = function (tagName, className) {var elment = Element(tagName);ame = className;return elment;};var createCanvas = function (width, height) {var canvas = Element('canvas'); = width;

= height;return canvas;};var canvas = createCanvas( - 2, ) // 画布var block = ode(true) // 滑块var sliderContainer = createElement('div', 'sliderContainer');var refreshIcon = createElement('i', 'refreshIcon ' + Icon);var sliderMask = createElement('div', 'sliderMask');var sliderbg = createElement('div', 'sliderbg');var slider = createElement('div', 'slider');var sliderIcon = createElement('i', 'fa fa-arrow-right sliderIcon');var text = createElement('span', 'sliderText');ame = 'block'TML = t;var el = this.$element;($(canvas));($(refreshIcon));($(block));Child(sliderIcon);Child(slider);Child(sliderbg);Child(sliderMask);Child(text);($(sliderContainer));(this, {canvas,block,sliderContainer: $(sliderContainer),refreshIcon,slider,sliderMask,sliderIcon,text: $(text),canvasCtx: text('2d'),

blockCtx: text('2d')})};_g = function () {var that = this;var isIE = f('Trident') > -1;var L = L + R * 2 + 3; // 滑块实际边长var drawImg = function (ctx, operation) {var l = L;var r = R;var PI = ;var x = that.x;var y = that.y;ath()(x, y)(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)(x + l, y)(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)(x + l, y + l)(x, y + l)(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)(x, y)dth = yle = 'rgba(255, 255, 255, 0.7)'Style = 'rgba(255, 255, 255, 0.7)'()ctx[operation]()CompositeOperation = isIE ? 'xor' : 'overlay'}var getRandomNumberByRange = function (start, end) {return (() * (end - start) + start);};var img = new Image();rigin = "Anonymous";

var loadCount = 0; = function () {// 随机创建滑块的位置that.x = getRandomNumberByRange(L + 10, - (L + 10));that.y = getRandomNumberByRange(10 + R * 2, - (L + 10));drawImg(Ctx, 'fill');drawImg(tx, 'clip');age(img, 0, 0, - 2, );age(img, 0, 0, - 2, );var y = that.y - R * 2 - 1;var ImageData = geData(that.x - 3, y, L, L); = L;geData(ImageData, 0, y);(('data-text'));};r = function () {loadCount++;if (ol === 'file:') {loadCount = dCount;("can't load pic resource file from File protocal. Please try http or https");}if (loadCount >= dCount) {('加载失败').addClass('text-danger');return;} = mages();}; = function () {var src = '';loadCount = 0;Class('text-danger');if ($.isFunction()) src = ();if (!src || src === '') src = '/' + + '/' + + '/?image=' +(() * 20);

var originX, originY, trail = [],isMouseDown = falsevar handleDragStart = function (e) {if (ss('text-danger')) return;originX = X || s[0].clientX;originY = Y || s[0].clientY;isMouseDown = true;};var handleDragMove = function (e) {if (!isMouseDown) return false;var eventX = X || s[0].clientX;var eventY = Y || s[0].clientY;var moveX = eventX - originX;var moveY = eventY - originY;if (moveX < 0 || moveX + 40 > ) return false; = (moveX - 1) + 'px';var blockLeft = ( - 40 - 20) / ( - 40) * moveX; = blockLeft + 'px';ss('sliderContainer_active'); = (moveX + 4) + 'px';(moveY);};var handleDragEnd = function (e) {if (!isMouseDown) return falseisMouseDown = falsevar eventX = X || dTouches[0].clientXif (eventX == originX) return Class('sliderContainer_active'); = trailvar {spliced,verified} = ()if (spliced && verified) {