好资源导航 » 文章资讯 » html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】

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

2023-08-14 23:01:05 77

电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件，通过鼠标拖动或触屏滑动填充拼图来进行安全验证，点击刷新可以更换当前待验证的图片。

HTML&css：







拖动滑块图片拼图验证码插件














请完成安全验证

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('div','sliderContainer'); varrefreshIcon=createElement('i','refreshIcon'+this.options.repeatIcon); varsliderMask=createElement('div','sliderMask'); varsliderbg=createElement('div','sliderbg'); varslider=createElement('div','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=2 ctx.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=false varhandleDragStart=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)returnfalse isMouseDown=false vareventX=e.clientX||e.changedTouches[0].clientX if(eventX==originX)returnfalse that.sliderContainer.removeClass('sliderContainer_active'); that.trail=trail var{ 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)

附录1：需要注意css和js的引用路径；

总结

以上所述是小编给大家介绍的html+jQuery实现拖动滑块图片拼图验证码插件希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐