首先上个效果图开开眼:
详细实现代码
<template>
<div class="box">
<h3>拖动滑块完成验证</h3>
<div class="img-box" ref="bgImgRef">
<img class="bg" src="https://img1.baidu.com/it/u=82139613,1601399491&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
<div class="hc" :style="{ left: data1.left + 'px', top: data1.top + 'px' }"></div>
<div class="hd" :style="{ left: data.left + 'px', top: data.top + 'px',backgroundPositionX: '0'-data1.left + 'px',backgroundPositionY:'0'-data1.top + 'px' }">
</div>
</div>
<div class="btn-box">
<div ref="btnRef" class="btn" :style="{ left: data.left + 'px' }" @mousedown="btnMousedown"
@mouseup="btnMouseup">|||</div>
</div>
</div>
</template>
<script setup>
import { reactive, onMounted, toRefs } from "vue";
// 全局
let $props = defineProps({
top: {
type: Number,
default: 140
}
})
let $emit = defineEmits(['getPosition'])
const data = reactive({
left: 0,
top: $props.top,
// 计算出的位置
btnLeft: 0,
btnRef: null,
offsetLeft: 0,
positon:0,
bgImgRef: null
});
const data1 = reactive({
left: 70,
top: $props.top,
// 计算出的位置
btnLeft: 0,
btnRef: null,
offsetLeft: 0,
bgImgRef: null
});
// 解构ref
const { btnRef, bgImgRef } = toRefs(data);
// let btnRef=ref(null)
onMounted(() => {
// data1随机位置
data1.left=(Math.random()*(270-70)+70).toFixed(0);
data1.top=((Math.random()*(210-50-50))+50).toFixed(0);
data.top=data1.top;
console.log(111,data1.left,data1.top);
data.offsetLeft = data.bgImgRef.offsetLeft
// 监听鼠标松开
document.body.addEventListener("mouseup", btnMouseup)
})
// 按下
var btnMousedown = (e) => {
// 计算出鼠标按下的位置 pageX 减去按钮距离窗口的位置等于鼠标点击的位置距离按钮的边距
data.btnLeft = e.pageX - data.btnRef.offsetLeft
document.body.addEventListener("mousemove", btnMousemove)
}
//滑动的时候只要求鼠标没有松开
var btnMousemove = (e) => {
// left等于鼠标的位置pageX减去data.btnRef.offsetLeft再减去data.btnLeft(计算出的距离)
let x = e.pageX - data.offsetLeft - data.btnLeft
// 判断滑动图片时是否超出范围
if (x <= 0) x = 0
else if (x >= 285) x = 285
data.left = x
}
// 鼠标松开
var btnMouseup = (e) => {
console.log(2);
$emit('getPosition', data.left)
if(data1.left>=data.left-3||data1.left<=data.left+3){
console.log("验证通过");
}
document.body.removeEventListener("mousemove", btnMousemove)
}
</script>
<style scoped lang="scss">
.box {
width: 340px;
height: 320px;
border: 1px solid #ccc;
margin: 0 auto;
padding: 10px;
}
.img-box {
position: relative;
}
.bg {
width: 100%;
}
.hd{
overflow: hidden;
background: url('https://img1.baidu.com/it/u=82139613,1601399491&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500');
background-size:340px 210px ;
background-position: -70px -110px;
position: absolute;
height: 50px;
width: 55px;
left: 10px;
cursor: pointer;
}
.hc{
background: rgb(180, 0, 0);
position: absolute;
height: 50px;
width: 55px;
left: 81px;
cursor: pointer;
}
.btn-box {
width: 100%;
height: 10px;
border-radius: 5px;
background: #e4e4e4;
margin-top: 15px;
}
.btn {
position: relative;
top: -10px;
left: 26px;
width: 55px;
height: 30px;
text-align: center;
letter-spacing: 5px;
line-height: 30px;
color: #fff;
border-radius: 15px;
background-color: rgb(26, 121, 255);
box-shadow: rgb(26 121 255 / 52%) 0px 0px 10px 1px;
cursor: pointer;
}
</style>