- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- 如何用JS写个简单的滑动拼图解锁，代码是什么
如何用JS写个简单的滑动拼图解锁，代码是什么
Admin 2022-11-14 群英技术资讯 469 次浏览
在这篇文章中我们来了解一下“如何用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>
由于拼图解锁我没做过，做了个大概的样子，效果图
代码
<!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>
上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"如何用JS写个简单的滑动拼图解锁，代码是什么"的内容，大家可以关注群英网络的其它相关文章。
标签：
js滑动解锁
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
js 数组去重的方法有哪一些？你了解多少？
这篇文章给大家分享的是js 数组去重的方法，对于“数组去重”问题实际工作或面试中都是常遇到的，而实现数组去重的方法有很多，感兴趣的朋友就跟着小编一起来了解一下这11种js数组去重的方法吧。
-
JS异步与回调概念是什么，怎么应用
这篇文章主要介绍了JavaScript中异步与回调的基本概念，以及回调地狱现象,本文主要介绍了异步和回调的基本概念，二者是JavaScript的核心内容，需要所有热爱JS的小伙伴深入了解，需要的朋友可以参考下
-
JS中Generator函数能解决什么问题，特征有哪些
本篇文章给大家带来了关于JavaScript的相关知识，其中主要为大家介绍了JS Generator函数yield表达式示例详解，Generator函数是ES6提供的一种异步编程解决方案，下面一起来看一下，希望对大家有帮助。
-
ElementUI项目的详细使用是怎样的，思路是什么
这篇文章主要介绍了ElementUI在实际项目使用的功能总结,本文分步骤通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
-
VUE递归实现树形组件的代码是什么，要点有哪些
本文实例为大家分享了vue递归实现树形组件的具体代码，供大家参考，具体内容如下1. 先来看一下效果：2. 代码部分 （myTree.vue）图片可以自己引一下自己的图片，或者使用iconfont的css引入。template div class=tree ul class=ul
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
