js实现html滑动图片拼图验证
本文实例为大家分享了js实现html滑动图片拼图验证的具体代码,供大家参考,具体内容如下
html:
Document
本文实例为大家分享了js实现html滑动图片拼图验证的具体代码,供大家参考,具体内容如下
html:
Document
css:
*{ margin:0; padding:0; } body{ background-color:#E8E8E8; } .container{ position:relative; } #canva{ background:indianred; } #block{ position:absolute; left:0px; } .refreshIcon{ position:absolute; left:280px; top:5px; width:21px; height:20px; cursor:pointer; background:url(./refresh.png); display:block; } .verSliderBlock{ height:40px; width:40px; background-color:#fff; background:url('./right_arrow.png'); background-size:100%; box-shadow:003pxrgba(0,0,0,.3); cursor:pointer; position:absolute; text-align:center; line-height:40px; color:#45494c; font-size:25px; font-weight:400; } .bar{ position:relative; text-align:center; width:310px; height:40px; line-height:40px; margin-top:15px; background:#f7f9fa; color:#45494c; border:1pxsolid#e4e7eb; display:block; } #bar-mask{ position:absolute; left:0; top:0; height:40px; border:0solid#1991fa; background:#d1e9fe; }
js:
(function(window){ varcanvas=document.getElementById('canvas'); varblock=document.getElementById('block'); varcanvas_ctx=canvas.getContext('2d') varblock_ctx=block.getContext('2d') varimg=document.createElement('img') varrefresh=document.querySelector('.refreshIcon') varx=Math.round(Math.random()*200)+10, y=Math.round(Math.random()*100)+10, w=42, l=42, r=10, PI=Math.PI console.log(x,y) //获取图片后面的随机号码 functiongetRandomNumberByRange(start,end){ returnMath.round(Math.random()*(end-start)+start) } //初始化图片 functioninitImg(){ img.onload=function(){ canvas_ctx.drawImage(img,0,0,310,155) block_ctx.drawImage(img,0,0,310,155) varblockWidth=w+r*2 var_y=y-r*2+2//滑块实际的y坐标 varImageData=block_ctx.getImageData(x,_y,blockWidth,blockWidth) block.width=blockWidth block_ctx.putImageData(ImageData,0,_y) }; img.crossOrigin="Anonymous" img.src='https://picsum.photos/300/150/?image='+getRandomNumberByRange(0,100) } //清除tupian functionclean(){ x=Math.round(Math.random()*200)+10, y=Math.round(Math.random()*100)+10, console.log(x,y) canvas_ctx.clearRect(0,0,310,155); block_ctx.clearRect(0,0,310,155) block.width=310 draw(canvas_ctx,'fill') draw(block_ctx,'clip') } //绘制方块 functiondraw(ctx,operation){ 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='overlay' } initImg() draw(canvas_ctx,'fill') draw(block_ctx,'clip') //添加移动事件 varblock_slider=document.querySelector("#block"); varslider=document.querySelector(".verSliderBlock"); varslider_mark=document.querySelector("#bar-mask"); //用于判断当前是否是在按住滑块的情况下 varyd=false varmoveX=0 vardownX=0 //鼠标按下 slider.onmousedown=function(e){ downX=e.clientX; yd=true } //鼠标移动事件 functionhadleMousemove(e){ if(yd){ moveX=e.clientX-downX; document.querySelector('#slide').innerHTML='' if(moveX>=310){ moveX=310-40 } if(moveX>-2){ slider.style.backgroundColor="#1991FA"; slider_mark.style.borderWidth="1px" slider_mark.style.borderColor="#1991fa" slider_mark.style.width=moveX+40+"px"; block_slider.style.left=(310-40-20)/(310-40)*moveX+"px"; slider.style.left=moveX+"px"; } } } //鼠标抬起事件 functionhadleMouseup(e){ if(yd){ slider.onmousemove=null; console.log(moveX) block_slider.style.left=(310-40-20)/(310-40)*moveX+"px"; if(Math.abs((310-40-20)/(310-40)*moveX-x)<10){ slider.style.background="url('./success.png')"; slider.style.backgroundSize='100%' //alert('验证成功') setTimeout(()=>{ rest(); },1000) }else{ slider_mark.style.backgroundColor="#fce1e1" slider_mark.style.borderWidth="1px" slider_mark.style.borderColor="#f57a7a" slider.style.backgroundColor="#f57a7a"; slider.style.background="url('./fail.png')"; slider.style.backgroundSize='100%' setTimeout(()=>{ rest(); },1000) } yd=false } } //鼠标在按住滑块下移动 slider.onmousemove=function(e){ hadleMousemove(e) } //鼠标在滑块下抬起 slider.onmouseup=function(e){ hadleMouseup(e) } //设置全局的移动事件,当鼠标按下滑块后,移动过程中鼠标可能会移出滑块,这是滑块也会监听鼠标的移动进行相应的移动 document.addEventListener('mousemove',function(e){ hadleMousemove(e) }) document.addEventListener('mouseup',function(e){ hadleMouseup(e) }) functionrest(){ clean() document.querySelector('#slide').innerHTML='向右滑动验证' slider.style.backgroundColor="#fff"; slider.style.left="0px" slider.style.background="url('./right_arrow.png')"; slider.style.backgroundSize='100%' block_slider.style.left="0px" slider_mark.style.width="0px" slider_mark.style.backgroundColor="#d1e9fe" slider_mark.style.borderWidth="0px" slider_mark.style.borderColor="#d1e9fe" initImg() } //刷新 refresh.onclick=function(){ rest() } }(window))
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。