jQuery拼图滑块验证

最新推荐文章于 2022-02-18 15:52:15 发布

cungudafa

最新推荐文章于 2022-02-18 15:52:15 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # Html 文章标签：拼图滑块验证

原文链接：http://www.jq22.com/jquery-info21851

Html 专栏收录该内容

22 篇文章

订阅专栏

效果：
在这里插入图片描述
项目目录：

html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery图片拼图验证</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<link href="css/img_smooth_check.css" type="text/css" rel="stylesheet" />
		<script src="js/img_smooth_check.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	<body>
		<div class="widgets__img_check_box" id="select" style="width:600px;margin:0 auto;top:2px;">
			<div class="widgets__img_display">
				<div class="widgets__img_cnt">
					<img src1="a.jpg" class="widgets__img_src" />
					<canvas class="widgets__img_fragment_hollow"></canvas>
					<div class="widgets__img_fragment_cnt">
						<canvas class="widgets__img_fragment widgets__img_fragment_shadow"></canvas>
						<canvas class="widgets__img_fragment widgets__img_fragment_content"></canvas>
					</div>
					<div class="widgets__icon_refresh"></div>
				</div>
			</div>
			<div class="widgets__smooth_cnt">
				<div class="widgets__smooth_bar"></div>
				<div class="widgets__smooth_circle"></div>
			</div>
		</div>
		<div class="refresh" style="margin-top:30px;">刷新</div>
	</body>
	<script>
		var s = WIDGETS.imgSmoothCheck({
			selector: "#select",
			data: ["img/t1.png", "img/t2.png", "img/t3.png"],//图片库
			imgHeight: 100,//宽
			imgWidth: 200,//长
			allowableErrorValue: 3,//容错范围
			success: function() {
				alert("成功");
			},
			error: function(res) {
				alert(res);
			}
		});
		$(".refresh").on("click", function() {
			s.refresh();
		});
	</script>
</html>

图片库：
在这里插入图片描述

img_smooth_check.js

var WIDGETS={imgSmoothCheck:undefined,}
var _widgets={default:{noop:function(){}}}
WIDGETS.imgSmoothCheck=function(options){options=$.extend({selector:".widgets__img_check_box",imgSrc:[],imgWidth:undefined,imgHeight:undefined,imgFragmentW:undefined,imgFragmentH:undefined,allowableErrorValue:4,success:_widgets.default.noop,error:_widgets.default.noop,},options||{});var $sel=$(options.selector);if(!$sel)return;var _data=options.data[0];function _getRandomChoosingImg(imgData){var index=Math.floor(imgData.length*Math.random());return imgData[index];}
function _initImgSrc($srcImg,strSrc){$srcImg.attr("src",strSrc);if(options.imgWidth)
$srcImg.attr("width",options.imgWidth);if(options.imgHeight)
$srcImg.attr("height",options.imgHeight);}
function _getRandomStartPosition(numW,numH,numClipW,numClipH,numCurveR){var minX=numClipW+numCurveR;var maxX=numW-numClipW-20;var minY=numCurveR,maxY=numH-numClipH-numCurveR;var position={};position.x=Math.random()*(maxX-minX)+minX;position.y=Math.random()*(maxY-minY)+minY;return position;}
function _calBestClipWidth(numW){return numW/6;}
function _canvasDrawPath(ctx,numStartX,numStartY,numClipWidth,numClipHeight,numCurveR){ctx.beginPath();ctx.strokeStyle="rgba(0,0,0,0)";ctx.moveTo(numStartX,numStartY);ctx.lineTo(numStartX+(numClipWidth/2)-numCurveR,numStartY);ctx.bezierCurveTo(numStartX+(numClipWidth/2)-numCurveR,numStartY-numCurveR,numStartX+(numClipWidth/2)+numCurveR,numStartY-numCurveR,numStartX+(numClipWidth/2)+numCurveR,numStartY);ctx.lineTo(numStartX+numClipWidth,numStartY);ctx.lineTo(numStartX+numClipWidth,numStartY+(numClipHeight/2)-numCurveR);ctx.bezierCurveTo(numStartX+numClipWidth-numCurveR,numStartY+(numClipHeight/2)-numCurveR,numStartX+numClipWidth-numCurveR,numStartY+(numClipHeight/2)+numCurveR,numStartX+numClipWidth,numStartY+(numClipHeight/2)+numCurveR);ctx.lineTo(numStartX+numClipWidth,numStartY+numClipHeight);ctx.lineTo(numStartX,numStartY+numClipHeight);ctx.closePath();}
function _drawCanvas(canvasOption){var numClipWidth=canvasOption.clipW,numClipHeight=canvasOption.clipH;var numCurveR=numClipWidth/3/2;var position=canvasOption.position;var numStartX=position.x,numStartY=position.y;var sImgSrc=canvasOption.img
var $cavImgFramentHollow=$sel.find("canvas.widgets__img_fragment_hollow");var $cavImgFramentContent=$sel.find("canvas.widgets__img_fragment_content");var $cavImgFramentShadow=$sel.find("canvas.widgets__img_fragment_shadow");var ctxImgFramentHollow=$cavImgFramentHollow[0].getContext("2d");var ctxImgFramentContent=$cavImgFramentContent[0].getContext("2d");var ctxImgFramentShadow=$cavImgFramentShadow[0].getContext("2d");$cavImgFramentHollow.attr("width",numImgWidth+"px");$cavImgFramentHollow.attr("height",numImgHeight+"px");$cavImgFramentContent.attr("width",numImgWidth+"px");$cavImgFramentContent.attr("height",numImgHeight+"px");$cavImgFramentShadow.attr("width",numImgWidth+"px");$cavImgFramentShadow.attr("height",numImgHeight+"px");$sel.find(".widgets__img_cnt").css("width",numImgWidth+"px");$sel.find(".widgets__img_display").css("width",numImgWidth+"px");$sel.find(".widgets__smooth_cnt").css("width",numImgWidth+"px");_canvasDrawPath(ctxImgFramentHollow,numStartX,numStartY,numClipWidth,numClipHeight,numCurveR);ctxImgFramentHollow.globalCompositeOperation="xor";ctxImgFramentHollow.shadowBlur=10;ctxImgFramentHollow.shadowColor="#fff";ctxImgFramentHollow.shadowOffsetX=3;ctxImgFramentHollow.shadowOffsetY=3;ctxImgFramentHollow.strokeStyle="rgba(0,0,0,0.5)";ctxImgFramentHollow.fillStyle="rgba(0,0,0,0.3)";ctxImgFramentHollow.fill();ctxImgFramentHollow.stroke();$sel.find(".widgets__img_fragment_cnt").css("left",-position.x);_canvasDrawPath(ctxImgFramentContent,numStartX,numStartY,numClipWidth,numClipHeight,numCurveR);ctxImgFramentContent.stroke();ctxImgFramentContent.clip();_canvasDrawPath(ctxImgFramentShadow,numStartX,numStartY,numClipWidth,numClipHeight,numCurveR);ctxImgFramentShadow.shadowBlur=18;ctxImgFramentShadow.shadowColor="black";ctxImgFramentShadow.fill();ctxImgFramentShadow.stroke();var img=new Image();img.onload=function(e){ctxImgFramentContent.drawImage(img,0,0,numImgWidth,numImgHeight);}
img.src=sImgSrc;return position;}
var $srcImg=$sel.find("img.widgets__img_src");var sSrcImgSrc=_getRandomChoosingImg(options.data);_initImgSrc($srcImg,sSrcImgSrc);var numImgWidth=$srcImg.width();var numImgHeight=$srcImg.height();var numClipWidth=options.imgFragmentW===undefined?_calBestClipWidth(numImgWidth):options.imgFragmentW;var numClipHeight=options.imgFragmentW===undefined?_calBestClipWidth(numImgWidth):options.imgFragmentH;var numCurveR=numClipWidth/3/2;var position=_getRandomStartPosition(numImgWidth,numImgHeight,numClipWidth,numClipWidth,numCurveR);var numStartX=position.x,numStartY=position.y;var canvasOption={position:position,clipW:numClipWidth,clipH:numClipHeight,width:numImgWidth,height:numImgHeight,img:sSrcImgSrc};_drawCanvas(canvasOption);var blnIsMobile=/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);var $smoothCir=$sel.find(".widgets__smooth_circle");var $imgFragmentCnt=$sel.find(".widgets__img_fragment_cnt");var flag=false;var strDefualtLeft=$smoothCir.css("left");var numDefaultLeft=parseFloat(strDefualtLeft.substring(0,strDefualtLeft.lastIndexOf("px")));var strImgFragmentCntDefaultLeft=$imgFragmentCnt.css("left");var numImgFragmentCntDefaultLeft=parseFloat(strImgFragmentCntDefaultLeft.substring(0,strImgFragmentCntDefaultLeft.lastIndexOf("px")));var numStartPointLeft=-1;var sSmoothStart="mousedown";var sSmoothMove="mousemove";var sSmoothEnd="mouseup";if(blnIsMobile){sSmoothStart="touchstart";sSmoothMove="touchmove";sSmoothEnd="touchend";}
var _numMoveLength=-1;$smoothCir.on(sSmoothStart,function(){var strLeft=$smoothCir.css("left");var numCurrentLeft=parseFloat(strLeft.substring(0,strLeft.lastIndexOf("px")));if(flag===false&&numCurrentLeft==numDefaultLeft)
flag=true;});$smoothCir.on(sSmoothEnd,function(){_dealAfterSmoothEnd();});var $smoothCnt=$sel.find(".widgets__smooth_cnt");$smoothCnt.on(sSmoothMove,function(evt){evt.preventDefault();var strLeft=$smoothCir.css("left");var numCurrentLeft=parseFloat(strLeft.substring(0,strLeft.lastIndexOf("px")));if(flag===true){var numPageX=blnIsMobile?evt.targetTouches[0].pageX:evt.pageX;var numMoveLength=0;if(numCurrentLeft===numDefaultLeft){numStartPointLeft=numPageX;numMoveLength=numDefaultLeft+0.1;}else{numMoveLength=numPageX-numStartPointLeft;}
_numMoveLength=numMoveLength;if(numMoveLength<numDefaultLeft)return;if(numMoveLength+numClipWidth>=numImgWidth){_dealAfterSmoothEnd();return;}
$smoothCir.css("left",numMoveLength+"px");$imgFragmentCnt.css("left",numMoveLength+numImgFragmentCntDefaultLeft+"px");}});$smoothCnt.on("mouseleave",function(){_dealAfterSmoothEnd();});$smoothCnt.on("mouseup",function(){_dealAfterSmoothEnd();});$sel.find(".widgets__icon_refresh").on("click",function(){_refresh();});function _dealAfterSmoothEnd(){if(flag===true){flag=false;if(_checkImgCheckIsSuccess())
options.success();else if(_numMoveLength>1){options.error("验证失败！");_refresh();}else{$imgFragmentCnt.css("left",-position.x);$smoothCir.css("left",numDefaultLeft+"px");numImgFragmentCntDefaultLeft=-position.x;}}}
function _checkImgCheckIsSuccess(){var numAllowableError=options.allowableErrorValue;var sLeft=$imgFragmentCnt.css("left");var numLeft=parseFloat(sLeft.substring(0,sLeft.lastIndexOf("px")));if(numLeft<numAllowableError&&numLeft>-numAllowableError)
return true;return false;}
function _refresh(){var $srcImg=$sel.find("img.widgets__img_src");var strImgSrc=_getRandomChoosingImg(options.data);$srcImg.attr("src",strImgSrc);position=_getRandomStartPosition(numImgWidth,numImgHeight,numClipWidth,numClipHeight,numCurveR)
canvasOption.img=strImgSrc;canvasOption.position=position;_drawCanvas(canvasOption);$imgFragmentCnt.css("left",-position.x);$smoothCir.css("left",numDefaultLeft+"px");numImgFragmentCntDefaultLeft=-position.x;flag=false;}
this.refresh=function(){_refresh();}
return this;};

img_smooth_check.css

.widgets__img_check_box{position:relative;text-align:center}.widgets__img_display{position:relative;padding:16px 16px 7px;border:1px solid #ddd;background:#f2ece1;border-radius:16px;overflow:hidden;margin:auto}.widgets__img_cnt{position:relative}.widgets__img_src,.widgets__img_fragment_hollow{position:absolute;left:0;top:0;z-index:10}.widgets__img_src{position:relative;box-shadow:0 0 6px 0 #73706e}.widgets__img_fragment_cnt{top:0;left:-50px;position:absolute}.widgets__img_fragment_cnt .widgets__img_fragment_content,.widgets__img_fragment_cnt .widgets__img_fragment{position:absolute;z-index:20}.widgets__smooth_cnt{position:relative;background-color:aqua;height:50px;width:80%;margin:auto;margin-top:20px;border-left:20px solid #f2ece1;border-right:20px solid #f2ece1;border-radius:24px;background-color:#f2ece1}.widgets__smooth_bar,.widgets__smooth_circle{position:relative;top:50%;transform:translateY(-50%)}.widgets__smooth_bar{width:100%;height:10px;background-color:#f27171;border-radius:24px}.widgets__smooth_circle{position:absolute;width:30px;height:30px;background-color:#827878;border-radius:50%;box-shadow:0 0 6px 0 #73706e;cursor:pointer}.widgets__icon_refresh{display:block;position:relative;width:16px;height:16px;padding:2px;border:4px solid transparent;cursor:pointer}.widgets__icon_refresh:before{position:absolute;content:"";display:block;width:calc(100% - 4px);height:calc(100% - 4px);border-radius:100%;border:2px solid #b7b7b7;border-top:2px solid transparent;-webkit-transform:rotate(45deg)}.widgets__icon_refresh:after{position:absolute;content:"";display:block;border:7px solid transparent;border-left:7px solid #b7b7b7;left:50%;top:-3.5px}