如何使用js实现滑动拼图解锁
导读：本文共3061字符，通常情况下阅读需要10分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 具体内容如下简单实现滑动解锁，效果图是这样的<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=de... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。具体内容如下
简单实现滑动解锁，效果图是这样的
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>滑动解锁</title><style>.div1{width:200px;height:30px;border:1pxsolid#cccccc;user-select:none;position:relative;margin:0auto;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><!--大盒子--><divclass="div1"id='div1'><divclass="div2"id='div2'></div><spanclass="div3"id='div3'>>></span><divclass="div4"id='div4'>滑动解锁</div></div><script>//vara=1,b='1'//console.log(a+b,a-b,a++,b++)//conststr='console.log(1)';////replaceAll("\\(.*\\)","");//constnewStr=str.replace[/console\.log/,'return']//console.log(newStr)vardiv1=document.getElementById('div1');vardiv3=document.getElementById('div3');vardiv4=document.getElementById('div4');varleft;varpx=div1.offsetWidth-div3.offsetWidthdiv3.onmousedown=function(event){varevent=window.event||ev;left=event.clientX-div3.offsetLeft;//鼠标按下时的位置console.log(event)console.log(left)document.onmousemove=function(event){//鼠标移动varevent=window.event||ev;lefta=event.clientX-left;//鼠标移动的距离console.log(px,lefta);if(lefta<0){lefta=0;}elseif(px<lefta){lefta=px-2;}div3.style.left=lefta+'px';}document.onmouseup=function(event){//鼠标抬起varevent=window.event||ev;document.onmousemove=null;document.onmouseup=null;lefta=event.clientX-left;if(lefta<0){lefta=0;span.innerHTML='滑动解锁';}elseif(px<lefta){lefta=px-2;div4.innerHTML='解锁成功';div3.innerHTML='√';div3.onmousedown=null;alert('成功')}else{lefta=0;}div3.style.left=lefta+'px';}}</script></body></html>由于拼图解锁我没做过，做了个大概的样子，效果图
代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>滑动解锁</title><style>*{margin:0;padding:0;}.conter{width:202px;border:1pxsolid#ccc;margin:0auto;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:1pxsolid#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><!--大盒子--><divclass="conter"><!--可以放图片计算位置--><divclass="box"></div><divclass="div1"id='div1'><divclass="div2"id='div2'></div><!--对应缺口位置拖动到相应位置既符合--><spanclass="div3"id='div3'>>></span><divclass="div4"id='div4'>滑动解锁</div></div></div><script>vardiv1=document.getElementById('div1');vardiv3=document.getElementById('div3');vardiv4=document.getElementById('div4');varleft;varpx=div1.offsetWidth-div3.offsetWidthdiv3.onmousedown=function(event){varevent=window.event||ev;left=event.clientX-div3.offsetLeft;//鼠标按下时的位置document.onmousemove=function(event){//鼠标移动varevent=window.event||ev;lefta=event.clientX-left;//鼠标移动的距离//console.log(lefta);if(lefta<0){lefta=0;}elseif(px<lefta){lefta=px;}div3.style.left=lefta+'px';}document.onmouseup=function(event){//鼠标抬起varevent=window.event||ev;document.onmousemove=null;document.onmouseup=null;lefta=event.clientX-left;console.log(lefta)if(lefta<0){lefta=0;div4.innerHTML='滑动解锁';//是否符合缺口位置}elseif(lefta>'134'&&lefta<'142'){div4.innerHTML='解锁成功';div3.innerHTML='√';div3.onmousedown=null;alert('成功')}else{alert('错误，请重试')lefta=0;}div3.style.left=lefta+'px';}}</script></body></html> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
如何使用js实现滑动拼图解锁的详细内容，希望对您有所帮助，信息来源于网络。