2023年6月21日发(作者：)
html+jQuery实现拖动滑块图⽚拼图验证码插件【移动端适⽤】电脑和⼿机移动端都适⽤的jQuery拖动滑块图⽚拼图验证码插件，通过⿏标拖动或触屏滑动填充拼图来进⾏安全验证，点击刷新可以更换当前待验证的图⽚。HTML & css：
拖动滑块图⽚拼图验证码插件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 = 2 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 = false var 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 false isMouseDown = false var eventX = X || dTouches[0].clientX if (eventX == originX) return false Class('sliderContainer_active'); = trail var { 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'); = 0 = 0 = 0 () ('data-text', ()); (gText); (); };})(jQuery);附录1：需要注意css和js的引⽤路径；总结以上所述是⼩编给⼤家介绍的html+jQuery实现拖动滑块图⽚拼图验证码插件希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！
2023年6月21日发(作者：)
html+jQuery实现拖动滑块图⽚拼图验证码插件【移动端适⽤】电脑和⼿机移动端都适⽤的jQuery拖动滑块图⽚拼图验证码插件，通过⿏标拖动或触屏滑动填充拼图来进⾏安全验证，点击刷新可以更换当前待验证的图⽚。HTML & css：
拖动滑块图⽚拼图验证码插件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 = 2 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 = false var 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 false isMouseDown = false var eventX = X || dTouches[0].clientX if (eventX == originX) return false Class('sliderContainer_active'); = trail var { 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'); = 0 = 0 = 0 () ('data-text', ()); (gText); (); };})(jQuery);附录1：需要注意css和js的引⽤路径；总结以上所述是⼩编给⼤家介绍的html+jQuery实现拖动滑块图⽚拼图验证码插件希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！
TinyMCE汉化及本地上传图片功能实例详解
jquery使用ajax提交form表单
jQuery序列化表单的方法总结(serialize()、serializeArray...
Jquery取form表单中的所有参数
10款基于HTML5+CSS3实现的超酷源码动画
jQuery对from表单元素的操作
jQuery使用ajaxSubmit()提交表单示例
BootStrap4登录表单验证示例
jqueryajax异步提交表单数据的方法
jquery插件ajaxForm文档
《HTML5网页开发实例详解》目录
jquery超全基础实例练习
formValidate输入验证
《网页设计与制作立体化教程(DreamweaverCC2018)》教学大纲
jQuery实现图片渐入渐出切换展示效果
前端之jquery函数库
Htmlform表单提交前验证
BootstrapValidator表单验证超详细教程
jquery实现动态创建form并提交的方法示例
bootstrap-validator自定义验证规则,修改验证事件为blur
发布评论