第一种
效果图
<template>
<div>
<div id="box">
<div class="bgColor"></div>
<div class="txt">滑动解锁</div>
<!--给i标签添加上相应字体图标的类名即可-->
<div class="slider">
<i v-show="!isSuccess" class="el-icon-d-arrow-right"></i>
<i v-show="isSuccess" class="el-icon-check"></i>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
var self = this;
//一、定义了一个获取元素的方法
function getEle(selector) {
return document.querySelector(selector);
}
//二、获取到需要用到的DOM元素
var box = getEle('#box'), //容器
bgColor = getEle('.bgColor'), //背景色
txt = getEle('.txt'), //文本
slider = getEle('.slider'), //滑块
icon = getEle('.slider>i'),
successMoveDistance = box.offsetWidth - slider.offsetWidth, //解锁需要滑动的距离
downX; //用于存放鼠标按下时的位置
//三、给滑块添加鼠标按下事件
slider.onmousedown = mousedownHandler;
slider.ontouchstart = mousedownHandler; //移动端加touchstart事件
//3.1鼠标按下事件的方法实现
function mousedownHandler(e) {
bgColor.style.transition = '';
slider.style.transition = '';
var e = e || window.event || e.which;
downX = e.clientX ? e.clientX : e.changedTouches[0].clientX;
if (!self.isSuccess) {
//在鼠标按下时，分别给鼠标添加移动和松开事件
document.onmousemove = mousemoveHandler;
document.onmouseup = mouseupHandler;
//添加移动端对应事件
document.ontouchmove = mousemoveHandler;
document.ontouchend = mouseupHandler;
}
}
//四、定义一个获取鼠标当前需要移动多少距离的方法
function getOffsetX(offset, min, max) {
if (offset < min) {
offset = min;
} else if (offset > max) {
offset = max;
}
return offset;
}
//3.1.1鼠标移动事件的方法实现
function mousemoveHandler(e) {
var e = e || window.event || e.which;
var moveX = e.clientX ? e.clientX : e.changedTouches[0].clientX;
console.log(moveX);
var offsetX = getOffsetX(moveX - downX, 0, successMoveDistance);
bgColor.style.width = offsetX + 'px';
slider.style.left = offsetX + 'px';
if (offsetX == successMoveDistance) {
success();
}
//如果不设置滑块滑动时会出现问题（目前还不知道为什么）
e.preventDefault();
}
//3.1.2鼠标松开事件的方法实现
function mouseupHandler(e) {
if (!self.isSuccess) {
bgColor.style.width = 0 + 'px';
slider.style.left = 0 + 'px';
bgColor.style.transition = 'width 0.5s linear';
slider.style.transition = 'left 0.5s linear';
}
document.onmousemove = null;
document.onmouseup = null;
//移除移动端事件
document.ontouchmove = null;
document.ontouchend = null;
}
//五、定义一个滑块解锁成功的方法
function success() {
self.isSuccess = true;
txt.innerHTML = '解锁成功';
bgColor.style.backgroundColor = 'lightgreen';
//滑动成功时，移除鼠标按下事件和鼠标移动事件
slider.onmousedown = null;
document.onmousemove = null;
//移除移动端事件
document.ontouchstart = null;
document.ontouchmove = null;
}
},
data() {
return {
isSuccess: false
};
}
};
</script>
<style>
// 使用全局样式样式去掉
* {
touch-action: pan-y;
}
#box {
position: relative;
width: 300px;
height: 40px;
margin: 0 auto;
margin-top: 10px;
background-color: #e8e8e8;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.bgColor {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background-color: lightblue;
}
.txt {
position: absolute;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 14px;
color: #000;
text-align: center;
}
.slider {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 40px;
background: #fff;
text-align: center;
cursor: move;
}
.slider > i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
以上代码适配移动端和pc端，
可以根据自己的需要添加到页面，可以用mixin混入的方式引入，可以将整个mounted中的方法封装在一个方法内，这样不会显的乱，看自己情况引入使用就行，
style中下面的样式，是放置整体拖动
// 使用全局样式样式去掉
* { touch-action: pan-y; }
第二种
方式1
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动解锁</title>
<style>
.div1 {
width: 200px;
height: 30px;
border: 1px solid #cccccc;
user-select: none;
position: relative;
margin: 0 auto;
margin-top: 300px;
}
.div2 {
width: 100%;
height: 30px;
}
.div3 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 30px;
line-height: 30px;
text-align: center;
background: #fff;
cursor: pointer;
font-family: "宋体";
z-index: 10;
font-weight: bold;
color: #929292;
/* cursor: move; */
}
.div4 {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
line-height: 30px;
text-align: center;
z-index: -1;
background: #ccc;
}
</style>
</head>
<body>
<!-- 大盒子 -->
<div class="div1" id='div1'>
<div class="div2" id='div2'></div>
<span class="div3" id='div3'>>></span>
<div class="div4" id='div4'>滑动解锁</div>
</div>
<script>
// var a =1,b='1'
// console.log(a+b,a-b,a++,b++)
// const str = 'console.log(1)';
// // replaceAll("\\(.*\\)","");
// const newStr=str.replace[/console\.log/, 'return ']
// console.log(newStr)
var div1 = document.getElementById('div1');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
var left;
var px = div1.offsetWidth - div3.offsetWidth
div3.onmousedown = function (event) {
var event = window.event || ev;
left = event.clientX - div3.offsetLeft;//鼠标按下时的位置
console.log(event)
console.log(left)
document.onmousemove = function (event) {//鼠标移动
var event = window.event || ev;
lefta = event.clientX - left;//鼠标移动的距离
console.log(px, lefta);
if (lefta < 0) {
lefta = 0;
} else if (px < lefta) {
lefta = px - 2;
}
div3.style.left = lefta + 'px';
}
document.onmouseup = function (event) {//鼠标抬起
var event = window.event || ev;
document.onmousemove = null;
document.onmouseup = null;
lefta = event.clientX - left;
if (lefta < 0) {
lefta = 0;
span.innerHTML = '滑动解锁';
} else if (px < lefta) {
lefta = px - 2;
div4.innerHTML = '解锁成功';
div3.innerHTML = '√';
div3.onmousedown = null;
alert('成功')
} else {
lefta = 0;
}
div3.style.left = lefta + 'px';
}
}
</script>
</body>
</html>
方式2
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>滑动解锁</title>
<style>
* {
margin: 0;
padding: 0;
}
.conter {
width: 202px;
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 300px;
}
.box {
width: 202px;
height: 130px;
background: #ff00ff;
position: relative;
}
.box::before {
content: '';
position: absolute;
bottom: 50px;
right: 30px;
width: 30px;
height: 30px;
background: #fff;
z-index: 99;
}
.div1 {
position: absolute;
bottom: 0;
width: 200px;
height: 30px;
border: 1px solid #cccccc;
user-select: none;
position: relative;
}
.div2 {
width: 100%;
height: 30px;
}
.div3 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 30px;
line-height: 30px;
text-align: center;
background: #fff;
cursor: pointer;
font-family: '宋体';
z-index: 10;
font-weight: bold;
color: #929292;
z-index: 1000;
}
.div3::before {
content: '';
position: absolute;
top: -81px;
left: 3px;
width: 30px;
height: 30px;
background: #000;
}
.div4 {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
line-height: 30px;
text-align: center;
z-index: -1;
background: #ccc;
}
</style>
</head>
<body>
<!-- 大盒子 -->
<div class="conter">
<!-- 可以放图片 计算位置 -->
<div class="box"></div>
<div class="div1" id="div1">
<div class="div2" id="div2"></div>
<!-- 对应缺口位置 拖动到相应位置既符合 -->
<span class="div3" id="div3">>></span>
<div class="div4" id="div4">滑动解锁</div>
</div>
</div>
<script>
var div1 = document.getElementById('div1')
var div3 = document.getElementById('div3')
var div4 = document.getElementById('div4')
var left
var px = div1.offsetWidth - div3.offsetWidth
div3.onmousedown = function (event) {
var event = window.event || ev
left = event.clientX - div3.offsetLeft //鼠标按下时的位置
document.onmousemove = function (event) {
//鼠标移动
var event = window.event || ev
lefta = event.clientX - left //鼠标移动的距离
// console.log(lefta);
if (lefta < 0) {
lefta = 0
} else if (px < lefta) {
lefta = px
}
div3.style.left = lefta + 'px'
}
document.onmouseup = function (event) {
//鼠标抬起
var event = window.event || ev
document.onmousemove = null
document.onmouseup = null
lefta = event.clientX - left
console.log(lefta)
if (lefta < 0) {
lefta = 0
div4.innerHTML = '滑动解锁'
// 是否符合缺口位置
} else if (lefta > '134' && lefta < '142') {
div4.innerHTML = '解锁成功'
div3.innerHTML = '√'
div3.onmousedown = null
alert('成功')
} else {
alert('错误，请重试')
lefta = 0
}
div3.style.left = lefta + 'px'
}
}
</script>
</body>
</html>
1505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
