发布时间：2025-12-11 02:30:00 浏览次数：1
电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件,通过鼠标拖动或触屏滑动填充拼图来进行安全验证,点击刷新可以更换当前待验证的图片。
HTML & css:
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>拖动滑块图片拼图验证码插件</title><!--框架样式--><linkhref="css/bootstrap.min.css"rel="externalnofollow"rel="stylesheet"><!--图标样式--><linkhref="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css"rel="stylesheet"><!--主要样式--><linkhref="disk/slidercaptcha.css"rel="externalnofollow"rel="stylesheet"/><style>.slidercaptcha{margin:0auto;width:314px;height:286px;border-radius:4px;box-shadow:0010pxrgba(0,0,0,0.125);margin-top:40px;}.slidercaptcha.card-body{padding:1rem;}.slidercaptchacanvas:first-child{border-radius:4px;border:1pxsolid#e6e8eb;}.slidercaptcha.card.card-header{background-image:none;background-color:rgba(0,0,0,0.03);}.refreshIcon{top:-54px;}</style></head><body><pclass="container-fluid"><pclass="form-row"><pclass="col-12"><pclass="slidercaptchacard"><pclass="card-header"><span>请完成安全验证</span></p><pclass="card-body"><pid="captcha"></p></p></p></p></p></p><scriptsrc="js/jquery-1.11.0.min.js"type="text/javascript"></script><scriptsrc="disk/longbow.slidercaptcha.js"></script><script>$('#captcha').sliderCaptcha({repeatIcon:'fafa-redo',setSrc:function(){return'https://cache.yisu.com/upload/information/20200622/114/14881.jpg';},onSuccess:function(){alert('验证通过!');}});</script></body></html>disk/slidercaptcha.css: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:1pxsolid#e6e8eb;}.sliderContainer_active.slider{top:-1px;border:1pxsolid#1991FA;}.sliderContainer_active.sliderMask{border-width:1px01px1px;}.sliderContainer_success.slider{top:-1px;border:1pxsolid#52CCBA;background-color:#52CCBA!important;}.sliderContainer_success.sliderMask{border:1pxsolid#52CCBA;border-width:1px01px1px;background-color:#D2F4EF;}.sliderContainer_success.sliderIcon:before{content:"\f00c";}.sliderContainer_fail.slider{top:-1px;border:1pxsolid#f57a7a;background-color:#f57a7a!important;}.sliderContainer_fail.sliderMask{border:1pxsolid#f57a7a;background-color:#fce1e1;border-width:1px01px1px;}.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:0solid#1991FA;background:#D1E9FE;border-radius:2px;}.slider{position:absolute;top:0;left:0;width:40px;height:40px;background:#fff;box-shadow:003pxrgba(0,0,0,0.3);cursor:pointer;transition:background.2slinear;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.3slinear;}.refreshIcon:hover{color:#6c757d;}disk/longbow.slidercaptcha.js:(function($){'usestrict';varSliderCaptcha=function(element,options){this.$element=$(element);this.options=$.extend({},SliderCaptcha.DEFAULTS,options);this.$element.css({'position':'relative','width':this.options.width+'px','margin':'0auto'});this.init();};SliderCaptcha.VERSION='1.0';SliderCaptcha.Author='argo@163.com';SliderCaptcha.DEFAULTS={width:280,//canvas宽度height:155,//canvas高度PI:Math.PI,sliderL:42,//滑块边长sliderR:9,//滑块半径offset:5,//容错偏差loadingText:'正在加载中...',failedText:'再试一次',barText:'向右滑动填充拼图',repeatIcon:'fafa-repeat',maxLoadCount:3,localImages:function(){return'images/Pic'+Math.round(Math.random()*4)+'.jpg';}};functionPlugin(option){returnthis.each(function(){var$this=$(this);vardata=$this.data('lgb.SliderCaptcha');varoptions=typeofoption==='object'&&option;if(data&&!/reset/.test(option))return;if(!data)$this.data('lgb.SliderCaptcha',data=newSliderCaptcha(this,options));if(typeofoption==='string')data[option]();});}$.fn.sliderCaptcha=Plugin;$.fn.sliderCaptcha.Constructor=SliderCaptcha;var_proto=SliderCaptcha.prototype;_proto.init=function(){this.initDOM();this.initImg();this.bindEvents();};_proto.initDOM=function(){varcreateElement=function(tagName,className){varelment=document.createElement(tagName);elment.className=className;returnelment;};varcreateCanvas=function(width,height){varcanvas=document.createElement('canvas');canvas.width=width;canvas.height=height;returncanvas;};varcanvas=createCanvas(this.options.width-2,this.options.height)//画布varblock=canvas.cloneNode(true)//滑块varsliderContainer=createElement('p','sliderContainer');varrefreshIcon=createElement('i','refreshIcon'+this.options.repeatIcon);varsliderMask=createElement('p','sliderMask');varsliderbg=createElement('p','sliderbg');varslider=createElement('p','slider');varsliderIcon=createElement('i','fafa-arrow-rightsliderIcon');vartext=createElement('span','sliderText');block.className='block'text.innerHTML=this.options.barText;varel=this.$element;el.append($(canvas));el.append($(refreshIcon));el.append($(block));slider.appendChild(sliderIcon);sliderMask.appendChild(slider);sliderContainer.appendChild(sliderbg);sliderContainer.appendChild(sliderMask);sliderContainer.appendChild(text);el.append($(sliderContainer));Object.assign(this,{canvas,block,sliderContainer:$(sliderContainer),refreshIcon,slider,sliderMask,sliderIcon,text:$(text),canvasCtx:canvas.getContext('2d'),blockCtx:block.getContext('2d')})};_proto.initImg=function(){varthat=this;varisIE=window.navigator.userAgent.indexOf('Trident')>-1;varL=this.options.sliderL+this.options.sliderR*2+3;//滑块实际边长vardrawImg=function(ctx,operation){varl=that.options.sliderL;varr=that.options.sliderR;varPI=that.options.PI;varx=that.x;vary=that.y;ctx.beginPath()ctx.moveTo(x,y)ctx.arc(x+l/2,y-r+2,r,0.72*PI,2.26*PI)ctx.lineTo(x+l,y)ctx.arc(x+l+r-2,y+l/2,r,1.21*PI,2.78*PI)ctx.lineTo(x+l,y+l)ctx.lineTo(x,y+l)ctx.arc(x+r-2,y+l/2,r+0.4,2.76*PI,1.24*PI,true)ctx.lineTo(x,y)ctx.lineWidth=2ctx.fillStyle='rgba(255,255,255,0.7)'ctx.strokeStyle='rgba(255,255,255,0.7)'ctx.stroke()ctx[operation]()ctx.globalCompositeOperation=isIE?'xor':'overlay'}vargetRandomNumberByRange=function(start,end){returnMath.round(Math.random()*(end-start)+start);};varimg=newImage();img.crossOrigin="Anonymous";varloadCount=0;img.onload=function(){//随机创建滑块的位置that.x=getRandomNumberByRange(L+10,that.options.width-(L+10));that.y=getRandomNumberByRange(10+that.options.sliderR*2,that.options.height-(L+10));drawImg(that.canvasCtx,'fill');drawImg(that.blockCtx,'clip');that.canvasCtx.drawImage(img,0,0,that.options.width-2,that.options.height);that.blockCtx.drawImage(img,0,0,that.options.width-2,that.options.height);vary=that.y-that.options.sliderR*2-1;varImageData=that.blockCtx.getImageData(that.x-3,y,L,L);that.block.width=L;that.blockCtx.putImageData(ImageData,0,y);that.text.text(that.text.attr('data-text'));};img.onerror=function(){loadCount++;if(window.location.protocol==='file:'){loadCount=that.options.maxLoadCount;console.error("can'tloadpicresourcefilefromFileprotocal.Pleasetryhttporhttps");}if(loadCount>=that.options.maxLoadCount){that.text.text('加载失败').addClass('text-danger');return;}img.src=that.options.localImages();};img.setSrc=function(){varsrc='';loadCount=0;that.text.removeClass('text-danger');if($.isFunction(that.options.setSrc))src=that.options.setSrc();if(!src||src==='')src='https://picsum.photos/'+that.options.width+'/'+that.options.height+'/?image='+Math.round(Math.random()*20);if(isIE){//IE浏览器无法通过img.crossOrigin跨域,使用ajax获取图片blob然后转为dataURL显示varxhr=newXMLHttpRequest()xhr.onloadend=function(e){varfile=newFileReader();//FileReader仅支持IE10+file.readAsDataURL(e.target.response);file.onloadend=function(e){img.src=e.target.result;}}xhr.open('GET',src);xhr.responseType='blob';xhr.send();}elseimg.src=src;};img.setSrc();this.text.attr('data-text',this.options.barText);this.text.text(this.options.loadingText);this.img=img};_proto.clean=function(){this.canvasCtx.clearRect(0,0,this.options.width,this.options.height);this.blockCtx.clearRect(0,0,this.options.width,this.options.height);this.block.width=this.options.width;};_proto.bindEvents=function(){varthat=this;this.$element.on('selectstart',function(){returnfalse;});$(this.refreshIcon).on('click',function(){that.text.text(that.options.barText);that.reset();if($.isFunction(that.options.onRefresh))that.options.onRefresh.call(that.$element);});varoriginX,originY,trail=[],isMouseDown=falsevarhandleDragStart=function(e){if(that.text.hasClass('text-danger'))return;originX=e.clientX||e.touches[0].clientX;originY=e.clientY||e.touches[0].clientY;isMouseDown=true;};varhandleDragMove=function(e){if(!isMouseDown)returnfalse;vareventX=e.clientX||e.touches[0].clientX;vareventY=e.clientY||e.touches[0].clientY;varmoveX=eventX-originX;varmoveY=eventY-originY;if(moveX<0||moveX+40>that.options.width)returnfalse;that.slider.style.left=(moveX-1)+'px';varblockLeft=(that.options.width-40-20)/(that.options.width-40)*moveX;that.block.style.left=blockLeft+'px';that.sliderContainer.addClass('sliderContainer_active');that.sliderMask.style.width=(moveX+4)+'px';trail.push(moveY);};varhandleDragEnd=function(e){if(!isMouseDown)returnfalseisMouseDown=falsevareventX=e.clientX||e.changedTouches[0].clientXif(eventX==originX)returnfalsethat.sliderContainer.removeClass('sliderContainer_active');that.trail=trailvar{spliced,verified}=that.verify()if(spliced&&verified){that.sliderContainer.addClass('sliderContainer_success');if($.isFunction(that.options.onSuccess))that.options.onSuccess.call(that.$element);}else{that.sliderContainer.addClass('sliderContainer_fail');if($.isFunction(that.options.onFail))that.options.onFail.call(that.$element);setTimeout(()=>{that.text.text(that.options.failedText);that.reset();},1000);}};this.slider.addEventListener('mousedown',handleDragStart);this.slider.addEventListener('touchstart',handleDragStart);document.addEventListener('mousemove',handleDragMove);document.addEventListener('touchmove',handleDragMove);document.addEventListener('mouseup',handleDragEnd);document.addEventListener('touchend',handleDragEnd);document.addEventListener('mousedown',function(){returnfalse;});document.addEventListener('touchstart',function(){returnfalse;});};_proto.verify=function(){varsum=function(x,y){returnx+y;};varsquare=function(x){returnx*x;};vararr=this.trail//拖动时y轴的移动距离varaverage=arr.reduce(sum)/arr.length;vardeviations=arr.map(function(x){returnx-average;});varstddev=Math.sqrt(deviations.map(square).reduce(sum)/arr.length);varleft=parseInt(this.block.style.left);return{spliced:Math.abs(left-this.x)<this.options.offset,verified:stddev!==0,//简单验证下拖动轨迹,为零时表示Y轴上下没有波动,可能非人为操作}};_proto.reset=function(){this.sliderContainer.removeClass('sliderContainer_failsliderContainer_success');this.slider.style.left=0this.block.style.left=0this.sliderMask.style.width=0this.clean()this.text.attr('data-text',this.text.text());this.text.text(this.options.loadingText);this.img.setSrc();};})(jQuery);jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流