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.
340 lines
12 KiB
340 lines
12 KiB
function imgVer(Config) { |
|
var el = eval(Config.el); |
|
var w = Config.width; |
|
var h = Config.height; |
|
|
|
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 imgSrc = "https://cdn.yimian.ac.cn/easyVer/image.php?df="+Math.floor(Math.random()*10); |
|
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 id="kuang" 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;">Slide block to finish the jigsaw..</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; |
|
}); |
|
|
|
$(".slider-btn").on("touchstart",function(e) { |
|
e = e || window.event; |
|
$(this).css({ |
|
"background-position": "0 -216px" |
|
}); |
|
moveStart = e.targetTouches[0].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" |
|
}); |
|
} |
|
} |
|
}; |
|
//add var for touchend to get location |
|
var touch_pageX; |
|
|
|
$(".slider-btn").on("touchmove", function(e) { |
|
e = e || window.event; |
|
var moveX = e.targetTouches[0].pageX; |
|
touch_pageX=moveX; |
|
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;">Authority Confimed!</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);easyVer_off(); |
|
}, |
|
2000); |
|
|
|
Config.success(); |
|
} else { |
|
$(".ver-tips").html('<i style="background-position:-4px -1229px;"></i><span style="color:red;">Verification Failure!</span><span style="margin-left:4px;">Please drag block to the right position!</span>'); |
|
$(".ver-tips").addClass("slider-tips"); |
|
setTimeout(function() { |
|
$(".ver-tips").removeClass("slider-tips"); |
|
document.getElementById("scream").src="https://cdn.yimian.ac.cn/easyVer/image.php?df="+Math.floor(Math.random()*10); |
|
imgVer(Config); |
|
}, |
|
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); |
|
}) |
|
|
|
} |
|
|
|
$(".slider-btn").on("touchend", function(e) { |
|
e = e || window.event; |
|
var moveEnd_X = touch_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;">Authority Confimed!</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);easyVer_off(); |
|
}, |
|
2000); |
|
|
|
Config.success(); |
|
} else { |
|
$(".ver-tips").html('<i style="background-position:-4px -1229px;"></i><span style="color:red;">Verification Failure!</span><span style="margin-left:4px;">Please drag block to the right position!</span>'); |
|
$(".ver-tips").addClass("slider-tips"); |
|
setTimeout(function() { |
|
$(".ver-tips").removeClass("slider-tips"); |
|
document.getElementById("scream").src="https://cdn.yimian.ac.cn/easyVer/image.php?df="+Math.floor(Math.random()*10); |
|
imgVer(Config); |
|
}, |
|
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); |
|
}) |
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
var callBackFunctionName=""; |
|
|
|
$(".verBox").html("<div id=\"imgVer\" style=\"display:inline-block;\"></div>"); |
|
|
|
$(".ver").on('click',function () { |
|
$(".verBox").css({ |
|
"left":"0", |
|
"opacity":"1" |
|
}) |
|
|
|
}); |
|
|
|
|
|
function easyVer() |
|
{ |
|
imgVer({ |
|
el:'$("#imgVer")', |
|
width:'260', |
|
height:'116', |
|
success:function () { |
|
|
|
if(callBackFunctionName)eval(callBackFunctionName+"()"); |
|
}, |
|
error:function () { |
|
} |
|
}); |
|
} |
|
|
|
|
|
function easyVer_off() |
|
{ |
|
$(".verBox").css({ |
|
"left":"404px", |
|
"opacity":"0" |
|
}); |
|
} |
|
|
|
console.log('\n' + ' %c easyVer Vertification Plugin %c https://github.com/hhCandy/easyVer ' + '\n', 'color: #00FFFF; background: #030307; padding:5px 0;', 'background: #4682B4; padding:5px 0;'); |
|
|
|
function show_easyVer(){$(".verBox").css({"left":"0","opacity":"1" })} |