Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use js to achieve sliding jigsaw puzzle unlocking, the article is very detailed, has a certain reference value, interested friends must read it!

The details are as follows

Simply realize sliding unlocking, and the effect picture looks like this.

Slide to unlock .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: "Song style" 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;} > > Slide unlock / / var a = 1recoveryblemag1' / / console.log (axibmaealichibmaiaLiezhuo +) / / 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;// position when the mouse is pressed console.log (event) console.log (left) _ document.onmousemove = function (event) {/ / mouse movement var event = window.event | | ev Lefta = event.clientX-left;// distance the mouse moves 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[xss_clean] = '滑动解锁'; } else if (px < lefta) { lefta = px - 2; div4[xss_clean] = '解锁成功'; div3[xss_clean] = '√'; div3.onmousedown = null; alert('成功') } else { lefta = 0; } div3.style.left = lefta + 'px'; } } 由于拼图解锁我没做过，做了个大概的样子，效果图 代码 滑动解锁 * { 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; } >

> sliding unlock 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 / / position when the mouse is pressed _ document.onmousemove = function (event) {/ / mouse movement var event = window.event | | ev; lefta = event.clientX-left;// mouse movement distance / / 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[xss_clean] = '滑动解锁'; // 是否符合缺口位置 } else if (lefta >

'134'& & lefta

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.