2023年6月21日发(作者：)

html图⽚滑动验证码,html+jQuery实现拖动滑块图⽚拼图验证码插件【移动端适⽤】...电脑和⼿机移动端都适⽤的jQuery拖动滑块图⽚拼图验证码插件，通过⿏标拖动或触屏滑动填充拼图来进⾏安全验证，点击刷新可以更换当前待验证的图⽚。HTML & css：拖动滑块图⽚拼图验证码插件.slidercaptcha {margin: 0 auto;width: 314px;height: 286px;border-radius: 4px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);margin-top: 40px;}.slidercaptcha .card-body {padding: 1rem;}.slidercaptcha canvas:first-child {border-radius: 4px;border: 1px solid #e6e8eb;}. .card-header {background-image: none;background-color: rgba(0, 0, 0, 0.03);}.refreshIcon {top: -54px;}请完成安全验证$('#captcha').sliderCaptcha({repeatIcon: 'fa fa-redo',setSrc: function () {return '/Pic' + (() * 136) + '.jpg';},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 {}.refreshIcon {position: absolute;right: 0;top: 0;cursor: pointer;margin: 6px;color: rgba(0,0,0,.25);font-size: 1rem;z-index: 5;transition: color .3s linear;}.refreshIcon:hover {color: #6c757d;}disk/：(function ($) {'use strict';var SliderCaptcha = function (element, options) {this.$element = $(element);s = $.extend({}, TS, options);this.$({ 'position': 'relative', 'width': + 'px', 'margin': '0 auto' });();};N = '1.0'; = 'argo@';TS = {width: 280, // canvas宽度height: 155, // canvas⾼度PI: ,sliderL: 42, // 滑块边长sliderR: 9, // 滑块半径offset: 5, // 容错偏差loadingText: '正在加载中...',failedText: '再试⼀次',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);if (isIE) { // IE浏览器⽆法通过rigin跨域，使⽤ajax获取图⽚blob然后转为dataURL显⽰var xhr = new XMLHttpRequest()end = function (e) {var file = new FileReader(); // FileReader仅⽀持IE10+DataURL(se);end = function (e) { = ;}}('GET', src);seType = 'blob';();} else = src;};();('data-text', t);(gText); = img};_ = function () {ect(0, 0, , );ect(0, 0, , ); = ;};_ents = function () {var that = this;this.$('selectstart', function () {return false;});$(hIcon).on('click', function () {(t);();if ($.isFunction(esh)) (that.$element);});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) {ss('sliderContainer_success');if ($.isFunction(ess)) (that.$element);} else {ss('sliderContainer_fail');if ($.isFunction()) (that.$element);setTimeout(() => {(Text);();}, 1000);}};ntListener('mousedown', handleDragStart);ntListener('touchstart', handleDragStart);ntListener('mousemove', handleDragMove);ntListener('touchmove', handleDragMove);ntListener('mouseup', handleDragEnd);ntListener('touchend', handleDragEnd);ntListener('mousedown', function () { return false; });ntListener('touchstart', function () { return false; });};_ = function () {var sum = function (x, y) { return x + y; };var square = function (x) { return x * x; };var arr = // 拖动时y轴的移动距离var average = (sum) / ;var deviations = (function (x) { return x - average; });var stddev = ((square).reduce(sum) / );var left = parseInt();return {spliced: (left - this.x) < ,verified: stddev !== 0, // 简单验证下拖动轨迹，为零时表⽰Y轴上下没有波动，可能⾮⼈为操作}};_ = function () {Class('sliderContainer_fail sliderContainer_success'); = = = ()('data-text', ());(gText);();};})(jQuery);附录1：需要注意css和js的引⽤路径；总结以上所述是⼩编给⼤家介绍的html+jQuery实现拖动滑块图⽚拼图验证码插件希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对脚本之家⽹站的⽀持！如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

2023年6月21日发(作者：)

html图⽚滑动验证码,html+jQuery实现拖动滑块图⽚拼图验证码插件【移动端适⽤】...电脑和⼿机移动端都适⽤的jQuery拖动滑块图⽚拼图验证码插件，通过⿏标拖动或触屏滑动填充拼图来进⾏安全验证，点击刷新可以更换当前待验证的图⽚。HTML & css：拖动滑块图⽚拼图验证码插件.slidercaptcha {margin: 0 auto;width: 314px;height: 286px;border-radius: 4px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);margin-top: 40px;}.slidercaptcha .card-body {padding: 1rem;}.slidercaptcha canvas:first-child {border-radius: 4px;border: 1px solid #e6e8eb;}. .card-header {background-image: none;background-color: rgba(0, 0, 0, 0.03);}.refreshIcon {top: -54px;}请完成安全验证$('#captcha').sliderCaptcha({repeatIcon: 'fa fa-redo',setSrc: function () {return '/Pic' + (() * 136) + '.jpg';},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 {}.refreshIcon {position: absolute;right: 0;top: 0;cursor: pointer;margin: 6px;color: rgba(0,0,0,.25);font-size: 1rem;z-index: 5;transition: color .3s linear;}.refreshIcon:hover {color: #6c757d;}disk/：(function ($) {'use strict';var SliderCaptcha = function (element, options) {this.$element = $(element);s = $.extend({}, TS, options);this.$({ 'position': 'relative', 'width': + 'px', 'margin': '0 auto' });();};N = '1.0'; = 'argo@';TS = {width: 280, // canvas宽度height: 155, // canvas⾼度PI: ,sliderL: 42, // 滑块边长sliderR: 9, // 滑块半径offset: 5, // 容错偏差loadingText: '正在加载中...',failedText: '再试⼀次',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);if (isIE) { // IE浏览器⽆法通过rigin跨域，使⽤ajax获取图⽚blob然后转为dataURL显⽰var xhr = new XMLHttpRequest()end = function (e) {var file = new FileReader(); // FileReader仅⽀持IE10+DataURL(se);end = function (e) { = ;}}('GET', src);seType = 'blob';();} else = src;};();('data-text', t);(gText); = img};_ = function () {ect(0, 0, , );ect(0, 0, , ); = ;};_ents = function () {var that = this;this.$('selectstart', function () {return false;});$(hIcon).on('click', function () {(t);();if ($.isFunction(esh)) (that.$element);});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) {ss('sliderContainer_success');if ($.isFunction(ess)) (that.$element);} else {ss('sliderContainer_fail');if ($.isFunction()) (that.$element);setTimeout(() => {(Text);();}, 1000);}};ntListener('mousedown', handleDragStart);ntListener('touchstart', handleDragStart);ntListener('mousemove', handleDragMove);ntListener('touchmove', handleDragMove);ntListener('mouseup', handleDragEnd);ntListener('touchend', handleDragEnd);ntListener('mousedown', function () { return false; });ntListener('touchstart', function () { return false; });};_ = function () {var sum = function (x, y) { return x + y; };var square = function (x) { return x * x; };var arr = // 拖动时y轴的移动距离var average = (sum) / ;var deviations = (function (x) { return x - average; });var stddev = ((square).reduce(sum) / );var left = parseInt();return {spliced: (left - this.x) < ,verified: stddev !== 0, // 简单验证下拖动轨迹，为零时表⽰Y轴上下没有波动，可能⾮⼈为操作}};_ = function () {Class('sliderContainer_fail sliderContainer_success'); = = = ()('data-text', ());(gText);();};})(jQuery);附录1：需要注意css和js的引⽤路径；总结以上所述是⼩编给⼤家介绍的html+jQuery实现拖动滑块图⽚拼图验证码插件希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对脚本之家⽹站的⽀持！如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！