You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4 lines
5.3 KiB
4 lines
5.3 KiB
function imgVer(Config){var el=eval(Config.el);var w=Config.width;var h=Config.height;var imgLibrary=Config.img;var PL_Size=48;var padding=20;var MinN_X=padding+PL_Size;var MaxN_X=w-padding-PL_Size-PL_Size/6;var MaxN_Y=padding;var MinN_Y=h-padding-PL_Size-PL_Size/6;function RandomNum(Min,Max){var Range=Max-Min;var Rand=Math.random();if(Math.round(Rand*Range)==0){return Min+1;}else if(Math.round(Rand*Max)==Max){return Max-1;}else{var num=Min+Math.round(Rand*Range)-1;return num;}} |
|
var imgRandom=RandomNum(1,imgLibrary.length);var imgSrc=imgLibrary[imgRandom];var X=RandomNum(MinN_X,MaxN_X);var Y=RandomNum(MinN_Y,MaxN_Y);var left_Num=-X+10;var html='<div style="position:relative;padding:16px 16px 28px;border:1px solid #ddd;background:#f2ece1;border-radius:16px;">';html+='<div style="position:relative;overflow:hidden;width:'+w+'px;">';html+='<div style="position:relative;width:'+w+'px;height:'+h+'px;">';html+='<img id="scream" src="'+imgSrc+'" style="width:'+w+'px;height:'+h+'px;">';html+='<canvas id="puzzleBox" width="'+w+'" height="'+h+'" style="position:absolute;left:0;top:0;z-index:22;"></canvas>';html+='</div>';html+='<div class="puzzle-lost-box" style="position:absolute;width:'+w+'px;height:'+h+'px;top:0;left:'+left_Num+'px;z-index:111;">';html+='<canvas id="puzzleShadow" width="'+w+'" height="'+h+'" style="position:absolute;left:0;top:0;z-index:22;"></canvas>';html+='<canvas id="puzzleLost" width="'+w+'" height="'+h+'" style="position:absolute;left:0;top:0;z-index:33;"></canvas>';html+='</div>';html+='<p class="ver-tips"></p>';html+='</div>';html+='<div class="re-btn"><a></a></div>';html+='</div>';html+='<br>';html+='<div style="position:relative;width:'+w+'px;margin:auto;">';html+='<div style="border:1px solid #c3c3c3;border-radius:24px;background:#ece4dd;box-shadow:0 1px 1px rgba(12,10,10,0.2) inset;">';html+='<p style="font-size:12px;color: #486c80;line-height:28px;margin:0;text-align:right;padding-right:22px;">按住左边滑块，拖动完成上方拼图</p>';html+='</div>';html+='<div class="slider-btn"></div>';html+='</div>';el.html(html);var d=PL_Size/3;var c=document.getElementById("puzzleBox");var ctx=c.getContext("2d");ctx.globalCompositeOperation="xor";ctx.shadowBlur=10;ctx.shadowColor="#fff";ctx.shadowOffsetX=3;ctx.shadowOffsetY=3;ctx.fillStyle="rgba(0,0,0,0.7)";ctx.beginPath();ctx.lineWidth="1";ctx.strokeStyle="rgba(0,0,0,0)";ctx.moveTo(X,Y);ctx.lineTo(X+d,Y);ctx.bezierCurveTo(X+d,Y-d,X+2*d,Y-d,X+2*d,Y);ctx.lineTo(X+3*d,Y);ctx.lineTo(X+3*d,Y+d);ctx.bezierCurveTo(X+2*d,Y+d,X+2*d,Y+2*d,X+3*d,Y+2*d);ctx.lineTo(X+3*d,Y+3*d);ctx.lineTo(X,Y+3*d);ctx.closePath();ctx.stroke();ctx.fill();var c_l=document.getElementById("puzzleLost");var c_s=document.getElementById("puzzleShadow");var ctx_l=c_l.getContext("2d");var ctx_s=c_s.getContext("2d");var img=new Image();img.src=imgSrc;img.onload=function(){ctx_l.drawImage(img,0,0,w,h);} |
|
ctx_l.beginPath();ctx_l.strokeStyle="rgba(0,0,0,0)";ctx_l.moveTo(X,Y);ctx_l.lineTo(X+d,Y);ctx_l.bezierCurveTo(X+d,Y-d,X+2*d,Y-d,X+2*d,Y);ctx_l.lineTo(X+3*d,Y);ctx_l.lineTo(X+3*d,Y+d);ctx_l.bezierCurveTo(X+2*d,Y+d,X+2*d,Y+2*d,X+3*d,Y+2*d);ctx_l.lineTo(X+3*d,Y+3*d);ctx_l.lineTo(X,Y+3*d);ctx_l.closePath();ctx_l.stroke();ctx_l.shadowBlur=10;ctx_l.shadowColor="black";ctx_l.clip();ctx_s.beginPath();ctx_s.lineWidth="1";ctx_s.strokeStyle="rgba(0,0,0,0)";ctx_s.moveTo(X,Y);ctx_s.lineTo(X+d,Y);ctx_s.bezierCurveTo(X+d,Y-d,X+2*d,Y-d,X+2*d,Y);ctx_s.lineTo(X+3*d,Y);ctx_s.lineTo(X+3*d,Y+d);ctx_s.bezierCurveTo(X+2*d,Y+d,X+2*d,Y+2*d,X+3*d,Y+2*d);ctx_s.lineTo(X+3*d,Y+3*d);ctx_s.lineTo(X,Y+3*d);ctx_s.closePath();ctx_s.stroke();ctx_s.shadowBlur=20;ctx_s.shadowColor="black";ctx_s.fill();var moveStart='';$(".slider-btn").mousedown(function(e){e=e||window.event;$(this).css({"background-position":"0 -216px"});moveStart=e.pageX;});onmousemove=function(e){e=e||window.event;var moveX=e.pageX;var d=moveX-moveStart;if(moveStart==''){}else{if(d<0||d>(w-padding-PL_Size)){}else{$(".slider-btn").css({"left":d+'px',"transition":"inherit"});$("#puzzleLost").css({"left":d+'px',"transition":"inherit"});$("#puzzleShadow").css({"left":d+'px',"transition":"inherit"});}}};onmouseup=function(e){e=e||window.event;var moveEnd_X=e.pageX-moveStart;var ver_Num=X-10;var deviation=4;var Min_left=ver_Num-deviation;var Max_left=ver_Num+deviation;if(moveStart==''){}else{if(Max_left>moveEnd_X&&moveEnd_X>Min_left){$(".ver-tips").html('<i style="background-position:-4px -1207px;"></i><span style="color:#42ca6b;">验证通过</span><span></span>');$(".ver-tips").addClass("slider-tips");$(".puzzle-lost-box").addClass("hidden");$("#puzzleBox").addClass("hidden");setTimeout(function(){$(".ver-tips").removeClass("slider-tips");imgVer(Config);},2000);Config.success();}else{$(".ver-tips").html('<i style="background-position:-4px -1229px;"></i><span style="color:red;">验证失败:</span><span style="margin-left:4px;">拖动滑块将悬浮图像正确拼合</span>');$(".ver-tips").addClass("slider-tips");setTimeout(function(){$(".ver-tips").removeClass("slider-tips");},2000);Config.error();}} |
|
setTimeout(function(){$(".slider-btn").css({"left":'0',"transition":"left 0.5s"});$("#puzzleLost").css({"left":'0',"transition":"left 0.5s"});$("#puzzleShadow").css({"left":'0',"transition":"left 0.5s"});},1000);$(".slider-btn").css({"background-position":"0 -84px"});moveStart='';$(".re-btn a").on("click",function(){imgVer(Config);})}} |