原生js实现简单滑动解锁功能 js实现滑动拼图解锁

<!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>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。