html 图片滑动验证码,html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】...

电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件，通过鼠标拖动或触屏滑动填充拼图来进行安全验证，点击刷新可以更换当前待验证的图片。

HTML & css：

拖动滑块图片拼图验证码插件

.slidercaptcha {

margin: 0 auto;

width: 314px;

height: 286px;

border-radius: 4px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);

margin-top: 40px;

}

.slidercaptcha .card-body {

padding: 1rem;

}

.slidercaptcha canvas:first-child {

border-radius: 4px;

border: 1px solid #e6e8eb;

}

.slidercaptcha.card .card-header {

background-image: none;

background-color: rgba(0, 0, 0, 0.03);

}

.refreshIcon {

top: -54px;

}

请完成安全验证

$('#captcha').sliderCaptcha({

repeatIcon: 'fa fa-redo',

setSrc: function () {

return 'http://images.sdgxgz.com/Pic' + Math.round(Math.random() * 136) + '.jpg';

},

onSuccess: function () {

alert('验证通过!');

}

});

disk/slidercaptcha.css：

body {

overflow-x: hidden;

}

.block {

position: absolute;

left: 0;

top: 0;

}

.sliderContainer {

position: relative;

text-align: center;

line-height: 40px;

background: #f7f9fa;

color: #45494c;

border-radius: 2px;

}

.sliderbg {

position: absolute;

left: 0;

right: 0;

top: 0;

background-color: #f7f9fa;

height: 40px;

border-radius: 2px;

border: 1px solid #e6e8eb;

}

.sliderContainer_active .slider {

top: -1px;

border: 1px solid #1991FA;

}

.sliderContainer_active .sliderMask {

border-width: 1px 0 1px 1px;

}

.sliderContainer_success .slider {

top: -1px;

border: 1px solid #52CCBA;

background-color: #52CCBA !important;

}

.sliderContainer_success .sliderMask {

border: 1px solid #52CCBA;

border-width: 1px 0 1px 1px;

background-color: #D2F4EF;

}

.sliderContainer_success .sliderIcon:before {

content: "\f00c";

}

.sliderContainer_fail .slider {

top: -1px;

border: 1px solid #f57a7a;

background-color: #f57a7a !important;

}

.sliderContainer_fail .sliderMask {

border: 1px solid #f57a7a;

background-color: #fce1e1;

border-width: 1px 0 1px 1px;

}

.sliderContainer_fail .sliderIcon:before {

content: "\f00d";

}

.sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText {

display: none;

}

.sliderMask {

position: absolute;

left: 0;

top: 0;

height: 40px;

border: 0 solid #1991FA;

background: #D1E9FE;

border-radius: 2px;

}