php滑动到最后验证,js实现滑动滑块验证（附代码）

本篇文章给大家带来的内容是关于js实现滑动滑块验证(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。html:

Title

拖动滑块

css:

.box {

width: 300px;

background-color: palevioletred;

padding: 20px;

background-color: #fff;

box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);

}

.imgBox img {

width: 100%;

}

.imgBox {

position: relative;

width: 300px;

overflow: hidden;

box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);

}

.verify {

position: absolute;

left: 10px;

width: 38px;

height: 38px;

top: 50%;

border-radius: 5px;

background-repeat: no-repeat;

background-attachment: scroll;

background-size: 300px;

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

z-index: 1;

}

.verified {

position: absolute;

width: 38px;

height: 38px;

top: 50%;

right: 10px;

border-radius: 5px;

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

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

}

.handle {

display: flex;

align-items: center;

position: relative;

height: 30px;

border-radius: 20px;

margin: 20px 0;

padding: 4px 0 4px 70px;

box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2) inset;

background: #f5f5f5;

user-select: none;

}

.swiper {

position: absolute;

top: -7px;

left: 0px;

width: 48px;

height: 48px;

border-radius: 50%;

background-color: pink;

box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);

z-index: 2;

}

.text {

color: #aaa;

position: relative;

z-index: 1;

width: 100%;

border-radius: 8px;

padding-left: 20px;

margin-left: -30px;

background: -webkit-gradient(linear, left top, right top, color-stop(0, #f1f1f1), color-stop(1, #f5f5f5));

transition: opacity 0.5s ease-in-out;

-webkit-animation: slidetounlock 2s infinite;

}

@keyframes slidetounlock {

0% {

background-position: -100px 0

}

50%{

background-position: 0px 0

}

100% {

background-position: 100px 0

}

}js:

var box = $('.box'),

imgBox = $('.imgBox'),

handle = $('.handle')

swiper = $('.swiper'),

text = $('.text'),

verify = $('.verify'),

verified = $('.verified')

$(function () {

// 随机添加背景图

refreshImg()

window.onload = start()

})

function start() {

var verImg = $('.verImg')[0];

if (verImg) {

verImg.onload = function () {

//获取图片的高度

var imgH = this.clientHeight;

//随机生成坐标(图片框固定宽度为300px 高度不定)

var verX = 150 * (1 + Math.random()) - 38,

verY = imgH / 4 + Math.random() * imgH / 2;

//用户滑动函数

fnDown(verX, verY);

}

}

}

function fnDown(verX, verY) {

swiper.mousedown(function () {

e=event || window.event

e.stopPropagation()//阻止冒泡行为(让子元素与父元素的响应分离)

//30为模块的宽度

verify.css({

display: 'block',

top: `${verY}px`,

'background-position': `-${verX}px -${verY}px`

})

verified.css({display: 'block', left: `${verX}px`, top: `${verY}px`})

// 获取鼠标到按钮的距离

var disX = e.clientX - $(this).offset().left,

disY = e.clientY - $(this).offset().top;

text.css('opacity', '0');

//防止重复绑定多次触发

box.unbind('mousemove');

box.unbind('mouseup');

//移动

box.bind('mousemove', function () {

e = event || window.event;

fnMove(e, disX, disY);

})

//释放

box.bind('mouseup', function () {

var stopL = verify.offset().left - 28;

//误差在2px以内则算验证成功

if (Math.abs(stopL - verX) > 2) {

alert('验证失败');

} else {

alert('验证成功');

}

//解除绑定，并将滑块模块归位

box.unbind('mousemove');

swiper.css('left', '0px');

verify.css('left', '10px');

text.css('opacity', '1')

box.unbind('mouseup');

})

})

}

function fnMove(e, posX, posY) {

// 这里的e是以鼠标为参考

var l = e.clientX - posX - $(handle).offset().left,

winW = $(handle).width() + 29

// 限制拖动范围只能在handle中

if (l < 0) {

l = 0

} else if (l > winW) {

l = winW

}

swiper.css('left', `${l}px`)

verify.css('left', `${l + 10}px`)

}

function refreshImg() {

verify.hide()

verified.hide()

var verImg = $('.verImg')

if (verImg.length) {

verImg.attr('src', `image/1.png`)

} else {

imgBox.prepend(``)

}

verify.css('background-image', `url('image/1.png')`)

}

相关推荐：