JS实现滑动拼图验证

}

.sliderContainer_success .slider {

height: 38px;

top: -1px;

border: 1px solid #52CCBA;

background-color: #52CCBA !important;

}

.sliderContainer_success .sliderMask {

height: 38px;

border: 1px solid #52CCBA;

background-color: #D2F4EF;

}

.sliderContainer_success .sliderIcon {

background-position: 0 0 !important;

}

.sliderContainer_fail .slider {

height: 38px;

top: -1px;

border: 1px solid #f57a7a;

background-color: #f57a7a !important;

}

.sliderContainer_fail .sliderMask {

height: 38px;

border: 1px solid #f57a7a;

background-color: #fce1e1;

}

.sliderContainer_fail .sliderIcon {

background-position: 0 -83px !important;

}

.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;

}

.slider {

position: absolute;

top: 0;

left: 0;

width: 40px;

height: 40px;

background: #fff;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

cursor: pointer;

transition: background .2s linear;

}

.slider:hover {

background: #1991FA;

}

.slider:hover .sliderIcon {

background-position: 0 -13px;

}

.sliderIcon {

position: absolute;

top: 15px;

left: 13px;

width: 14px;

height: 10px;

background: url(img/tb.png) 0 -26px;

background-size: 34px 471px;

}

.refreshIcon {

position: absolute;

right: 0;

top: 0;

width: 34px;

height: 34px;

cursor: pointer;

background: url(img/tb.png) 0 -437px;

background-size: 34px 471px;

}

页面,页面只用放一个div就可以了

js部分代码,包括验证是否正确

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值