更新脚本:行为式滑块验证码同步更新到最新
This commit is contained in:
parent
ee5a8cd74f
commit
5e94c74f84
|
@ -526,3 +526,11 @@ input.pending {
|
|||
padding: 0.375rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.refreshIcon {
|
||||
color: rgba(255,255,255,.8);
|
||||
}
|
||||
|
||||
.refreshIcon:hover {
|
||||
color: #fff;
|
||||
}
|
|
@ -19,7 +19,8 @@
|
|||
loadingText: '正在加载中...',
|
||||
failedText: '再试一次',
|
||||
barText: '向右滑动填充拼图',
|
||||
repeatIcon: 'fa fa-repeat'
|
||||
repeatIcon: 'fa fa-repeat',
|
||||
maxLoadCount: 3
|
||||
};
|
||||
|
||||
function Plugin(option) {
|
||||
|
@ -28,7 +29,7 @@
|
|||
var data = $this.data('lgb.SliderCaptcha');
|
||||
var options = typeof option === 'object' && option;
|
||||
|
||||
if (!data && /init|reset/.test(option)) return;
|
||||
if (!data && /init|reset|verify/.test(option)) return;
|
||||
if (!data) $this.data('lgb.SliderCaptcha', data = new SliderCaptcha(this, options));
|
||||
if (typeof option === 'string') data[option]();
|
||||
});
|
||||
|
@ -127,10 +128,11 @@
|
|||
return Math.round(Math.random() * (end - start) + start);
|
||||
};
|
||||
var localImg = function () {
|
||||
return $.format('../images/Pic{0}.jpg', Math.round(Math.random() * 4));
|
||||
return '../images/Pic' + Math.round(Math.random() * 4) + '.jpg';
|
||||
};
|
||||
var img = new Image();
|
||||
img.crossOrigin = "Anonymous";
|
||||
var loadCount = 0;
|
||||
img.onload = function () {
|
||||
// 随机创建滑块的位置
|
||||
that.x = getRandomNumberByRange(L + 10, that.options.width - (L + 10));
|
||||
|
@ -147,12 +149,23 @@
|
|||
that.text.text(that.text.attr('data-text'));
|
||||
};
|
||||
img.onerror = function () {
|
||||
loadCount++;
|
||||
if (window.location.protocol === 'file:') {
|
||||
loadCount = that.options.maxLoadCount;
|
||||
console.error("can't load pic resource file from File protocal. Please try http or https");
|
||||
}
|
||||
if (loadCount >= that.options.maxLoadCount) {
|
||||
that.text.text('加载失败').addClass('text-danger');
|
||||
return;
|
||||
}
|
||||
img.src = localImg();
|
||||
}
|
||||
img.setSrc = function () {
|
||||
var src = '';
|
||||
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 (!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显示
|
||||
var xhr = new XMLHttpRequest()
|
||||
xhr.onloadend = function (e) {
|
||||
|
@ -188,13 +201,14 @@
|
|||
$(this.refreshIcon).on('click', function () {
|
||||
that.text.text(that.options.barText);
|
||||
that.reset();
|
||||
if ($.isFunction(that.options.onRefresh)) that.options.onRefresh.call(that);
|
||||
if ($.isFunction(that.options.onRefresh)) that.options.onRefresh.call(that.$element);
|
||||
});
|
||||
|
||||
var originX, originY, trail = [],
|
||||
isMouseDown = false
|
||||
|
||||
var handleDragStart = 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;
|
||||
|
@ -229,10 +243,10 @@
|
|||
} = that.verify()
|
||||
if (spliced && verified) {
|
||||
that.sliderContainer.addClass('sliderContainer_success');
|
||||
if ($.isFunction(that.options.onSuccess)) that.options.onSuccess.call(that);
|
||||
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);
|
||||
if ($.isFunction(that.options.onFail)) that.options.onFail.call(that.$element);
|
||||
setTimeout(() => {
|
||||
that.text.text(that.options.failedText);
|
||||
that.reset();
|
||||
|
|
|
@ -120,12 +120,12 @@ body {
|
|||
top: 0;
|
||||
cursor: pointer;
|
||||
margin: 6px;
|
||||
color: rgba(255,255,255,.8);
|
||||
color: rgba(0,0,0,.25);
|
||||
font-size: 1rem;
|
||||
z-index: 5;
|
||||
transition: color .3s linear;
|
||||
}
|
||||
|
||||
.refreshIcon:hover {
|
||||
color: #fff;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue