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