如何使用js实现滑动拼图解锁
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍如何使用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; } .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实现滑动拼图解锁”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
