原生js實(shí)現(xiàn)簡(jiǎn)單滑動(dòng)解鎖功能?js實(shí)現(xiàn)滑動(dòng)拼圖解鎖
更新時(shí)間：2022年02月23日 09:54:57 作者：little_shallot
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡(jiǎn)單滑動(dòng)解鎖功能，js實(shí)現(xiàn)滑動(dòng)拼圖解鎖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單滑動(dòng)解鎖功能以及滑動(dòng)拼圖解鎖的具體代碼，供大家參考，具體內(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>由于拼圖解鎖我沒做過，做了個(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>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery使用unlock.js插件實(shí)現(xiàn)滑動(dòng)解鎖
- javascript實(shí)現(xiàn)滑動(dòng)解鎖功能
- javascript實(shí)現(xiàn)滑動(dòng)解鎖功能
- js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證
- JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能完整示例
- js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能
- 使用 Node.js 模擬滑動(dòng)拼圖驗(yàn)證碼操作的示例代碼
- JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果
- javascript結(jié)合Flexbox簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)拼圖游戲
相關(guān)文章
javascript封裝 Cookie 應(yīng)用接口
本文通過幾個(gè)簡(jiǎn)單的示例向大家展示了javascript封裝cookie的注意事項(xiàng)及操作方法，非常的簡(jiǎn)單實(shí)用，最后附上一則具體實(shí)例，有需要的小火把可以參考下。2015-08-08
詳解微信小程序-canvas繪制文字實(shí)現(xiàn)自動(dòng)換行
這篇文章主要介紹了微信小程序canvas繪制文字實(shí)現(xiàn)自動(dòng)換行，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript語(yǔ)句可以不以;結(jié)尾的煩惱
JavaScript語(yǔ)句可以不以;結(jié)尾的煩惱...2007-03-03
如何用JS模擬實(shí)現(xiàn)數(shù)組的map方法
這篇文章主要介紹了如何用JS模擬實(shí)現(xiàn)數(shù)組的map方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
javascript獲取重復(fù)次數(shù)最多的字符
本文給大家講述的是使用javascript實(shí)現(xiàn)獲取重復(fù)次數(shù)最多的字符，代碼很簡(jiǎn)單，有需要的小伙伴可以參考下。2015-07-07
js 判斷一組日期是否是連續(xù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s 判斷一組日期是否是連續(xù)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
js實(shí)現(xiàn)圖片拖動(dòng)改變順序附圖
需要改變多個(gè)元素的位置，可以通過元素拖動(dòng)來實(shí)現(xiàn)，下面以圖片拖動(dòng)為例，用jQuery來實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過濾的四種方法,每種方式通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
bootstrap table實(shí)現(xiàn)點(diǎn)擊翻頁(yè)功能 可記錄上下頁(yè)選中的行
這篇文章主要介紹了bootstrap table實(shí)現(xiàn)點(diǎn)擊翻頁(yè)功能，可記錄上下頁(yè)選中的行，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
跟我學(xué)習(xí)javascript的執(zhí)行上下文
跟我學(xué)習(xí)javascript的執(zhí)行上下文，讀完本文后，你應(yīng)該清楚了解釋器做了什么，為什么函數(shù)和變量能在聲明前使用以及它們的值是如何決定的，需要了解這些內(nèi)容的朋友可以參考下2015-11-11