怎样用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> 由于拼图解锁我没做过，做了个大概的样子，效果图 代码 <!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写个简单的滑动拼图解锁，代码是什么"的内容，大家可以关注其它相关文章。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
