ps: Only the front-end verification does not have high security;
Implementation: Listen to the moving event of the slider, get the distance from the left side, and assign it to the separated verification module. As for the module that is stuck, get the size of the picture, and assign it randomly according to half of the length and width of the picture ( Because this module is generally in the middle on the right)
html code:
<div class="box">
<div class="imgBox">
<div class="verify"></div>
<div class="verified"></div>
</div>
<div class="handle">
<span class="swiper"></span>
<span class="text">拖动滑块</span>
</div>
<div class="refreshBox">
<span class="refresh">点击切换图片</span>
</div>
</div>
css code:
.box {
width: 300px;
padding: 20px;
background-color: #fff;
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.4);
}
.imgBox {
position: relative;
width: 300px;
overflow: hidden;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
}
.imgBox img {
width: 100%;
height: 250px;
}
.imgBox div {
display: none;
}
.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;
}
.text {
opacity: 1;
transition: opacity 0.5s ease-in-out;
color: #aaa;
}
.swiper {
position: absolute;
top: -10px;
left: 0px;
width: 58px;
height: 58px;
border-radius: 50%;
background-color: pink;
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
}
.verify {
position: absolute;
left: 10px;
width: 38px;
height: 38px;
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: 10;
}
.verified {
position: absolute;
width: 38px;
height: 38px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4) inset;
}
.refreshBox {
border-top: 1px solid #ccc;
padding: 15px 0 0 5px;
}
.refresh {
color: #fff;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 8px 20px;
border-radius: 20px;
background-color: #555;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
transition: all 0.5s ease-in-out;
}
.refresh.click {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4) inset;
}
js code:
var box = $('.box'),
imgBox = $('.imgBox'),
handle = $('.handle'),
swiper = $('.swiper'),
text = $('.text'),
verify = $('.verify'),
verified = $('.verified'),
refresh = $('.refresh')
// Image collection
var imgs = []
for (let i = 1; i < 17; i++) {
imgs.push('' + i + i)
}
$(function() {
// Randomly add background image
refreshImg()
refresh.click(function() {
e = event || window.event
e.stopPropagation()
refreshImg()
start()
})
refresh.mousedown(function() {
$(this).addClass('click')
})
refresh.mouseup(function() {
$(this).removeClass('click')
})
window.onload = start()
})
function start() {
var verImg = document.getElementsByClassName('verImg')[0]
if (verImg) {
verImg.onload = function() {
// Get the image height
var imgH = this.clientHeight
// Randomly generate coordinates (the image frame has a fixed width of 300px and a variable height)
var verX = 150 * (1 + Math. random()) - 38,
verY = imgH / 4 + Math.random() * imgH / 2
// User moves the slider function
fnDown(verX, verY)
}
}
}
function fnDown(verX, verY) {
swiper.mousedown(function() {
e = event || window.event
e.stopPropagation()
// 30 is the module width
verify.css({
display: 'block',
top: `${verY}px`,
'background-position': `-${verX}px -${verY}px`
})
verified .css({ display: 'block', left: `${verX}px`, top: `${verY}px` })
// Get the distance from the mouse to the button
var disX = e.clientX - $(this) .offset().left,
disY = e.clientY - $(this).offset().top
text.css('opacity', '0')
// Prevent repeated binding from triggering multiple times
box.unbind('mousemove')
box.unbind('mouseup')
// 移动
box.bind('mousemove', function() {
e = event || window.event
fnMove(e, disX, disY)
})
// release
box.bind('mouseup', function() {
var stopL = verify.offset().left - 28
// if the error is within 2px, it is considered a success
if (Math.abs(stopL - verX) > 2) {
alert('Validation failed')
} else {
alert('Validation succeeded')
}
// Unbind and return the sliding module
box.unbind('mousemove')
swiper.css('left', '0px' )
verify.css('left', '10px')
text.css('opacity', '1')
box.unbind('mouseup')
})
})
}
function fnMove(e, posX, posY) {
// here e is the mouse reference
var l = e.clientX - posX - $(handle).offset().left,
winW = $(handle).width() + 29
// Limit the drag range to the handle only
if (l < 0) {
l = 0
} else if (l > winW) {
l = winW
}
swiper.css('left', `${l}px`)
verify.css('left', `${l + 10}px`)
}
function refreshImg() {
// Randomly generate subscripts
var index = Math.round(Math.random() * 15)
var imgH = 0
verify.hide()
verified.hide()
var verImg = $('.verImg')
if (verImg.length) {
verImg.attr('src', `imgs/${imgs[index]}.jpg`) //imgs文件夹存放图片
} else {
imgBox.prepend(`<img class='verImg' src="imgs/${imgs[index]}.jpg" />`)
}
verify.css('background-image', `url('imgs/${imgs[index]}.jpg')`)
}
There are three main parts, and
You need to create a folder to store pictures, and get pictures randomly from it
I am the imgs folder myself;