溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何使用js實(shí)現(xiàn)滑動(dòng)拼圖解鎖，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
具體內(nèi)容如下
簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)解鎖，效果圖是這樣的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑動(dòng)解鎖</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'>滑動(dòng)解鎖</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;//鼠標(biāo)按下時(shí)的位置
console.log(event)
console.log(left)
document.onmousemove = function (event) {//鼠標(biāo)移動(dòng)
var event = window.event || ev;
lefta = event.clientX - left;//鼠標(biāo)移動(dòng)的距離
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) {//鼠標(biāo)抬起
var event = window.event || ev;
document.onmousemove = null;
document.onmouseup = null;
lefta = event.clientX - left;
if (lefta < 0) {
lefta = 0;
span.innerHTML = '滑動(dòng)解鎖';
} 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>由于拼圖解鎖我沒(méi)做過(guò)，做了個(gè)大概的樣子，效果圖
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑動(dòng)解鎖</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">
<!-- 可以放圖片 計(jì)算位置 -->
<div class="box"></div>
<div class="div1" id='div1'>
<div class="div2" id='div2'></div>
<!-- 對(duì)應(yīng)缺口位置 拖動(dòng)到相應(yīng)位置既符合 -->
<span class="div3" id='div3'>>></span>
<div class="div4" id='div4'>滑動(dòng)解鎖</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;//鼠標(biāo)按下時(shí)的位置
document.onmousemove = function (event) {//鼠標(biāo)移動(dòng)
var event = window.event || ev;
lefta = event.clientX - left;//鼠標(biāo)移動(dòng)的距離
// console.log(lefta);
if (lefta < 0) {
lefta = 0;
} else if (px < lefta) {
lefta = px;
}
div3.style.left = lefta + 'px';
}
document.onmouseup = function (event) {//鼠標(biāo)抬起
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 = '滑動(dòng)解鎖';
// 是否符合缺口位置
} else if (lefta > '134' && lefta <'142') {
div4.innerHTML = '解鎖成功';
div3.innerHTML = '√';
div3.onmousedown = null;
alert('成功')
} else {
alert('錯(cuò)誤，請(qǐng)重試')
lefta = 0;
}
div3.style.left = lefta + 'px';
}
}
</script>
</body>
</html>以上是“如何使用js實(shí)現(xiàn)滑動(dòng)拼圖解鎖”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼