原生js實(shí)現(xiàn)簡單滑動解鎖功能?js實(shí)現(xiàn)滑動拼圖解鎖
更新時間：2022年02月23日 09:54:57 作者：little_shallot
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡單滑動解鎖功能，js實(shí)現(xiàn)滑動拼圖解鎖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡單滑動解鎖功能以及滑動拼圖解鎖的具體代碼，供大家參考，具體內(nèi)容如下
簡單實(shí)現(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">
? ? ? ? <!-- 可以放圖片 ?計(jì)算位置 -->
? ? ? ? <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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery使用unlock.js插件實(shí)現(xiàn)滑動解鎖
- javascript實(shí)現(xiàn)滑動解鎖功能
- javascript實(shí)現(xiàn)滑動解鎖功能
- js實(shí)現(xiàn)html滑動圖片拼圖驗(yàn)證
- JS實(shí)現(xiàn)滑動拼圖驗(yàn)證功能完整示例
- js+canvas實(shí)現(xiàn)滑動拼圖驗(yàn)證碼功能
- 使用 Node.js 模擬滑動拼圖驗(yàn)證碼操作的示例代碼
- JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動拼圖驗(yàn)證碼三種效果
- javascript結(jié)合Flexbox簡單實(shí)現(xiàn)滑動拼圖游戲
相關(guān)文章
JS運(yùn)動相關(guān)知識點(diǎn)小結(jié)(附彈性運(yùn)動示例)
這篇文章主要介紹了JS運(yùn)動相關(guān)知識點(diǎn),總結(jié)分析了JavaScript運(yùn)動所涉及的相關(guān)知識點(diǎn)與注意事項(xiàng),并附帶了一個JavaScript彈性運(yùn)動的實(shí)例供大家參考,需要的朋友可以參考下2016-01-01
Chrome插件擴(kuò)展 json格式化/壓縮 工具，方便json開發(fā)的朋友。2010-05-05
javascript DIV實(shí)現(xiàn)跟隨鼠標(biāo)移動
這篇文章主要為大家詳細(xì)介紹了javascript DIV跟隨鼠標(biāo)移動，有一個div跟隨鼠標(biāo)移動的結(jié)果，有一連串跟隨鼠標(biāo)移動的效果，感興趣的小伙伴們可以參考一下2016-02-02
如何在postman測試用例中實(shí)現(xiàn)斷言過程解析
這篇文章主要介紹了如何在postman測試用例中實(shí)現(xiàn)斷言過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
javascript實(shí)現(xiàn)在網(wǎng)頁中運(yùn)行本地程序的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)在網(wǎng)頁中運(yùn)行本地程序的方法,實(shí)例分析了JavaScript基于ActiveXObject運(yùn)行本地程序的技巧,需要的朋友可以參考下2016-02-02
JavaScript實(shí)現(xiàn)九九乘法表的簡單實(shí)例
下面小編就為大家?guī)硪黄狫avaScript實(shí)現(xiàn)九九乘法表的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
經(jīng)常用到對xml的操作，Java里面有dom和dom4j等工具類，但是Javascript就沒有，所以自己寫了一個，目前算作第一個版本吧?？隙ㄟ€有很多地方需要改進(jìn)，如果有需要用的朋友，可以把bug和需要完善改進(jìn)的地方留言或評論。2009-10-10
Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法實(shí)例
這篇文章主要介紹了Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法,結(jié)合完整實(shí)例形式分析了Bootstrap多級菜單布局相關(guān)樣式功能與具體使用技巧,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了詳解微信小程序支付流程與梳理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Bootstrap Table實(shí)現(xiàn)定時刷新數(shù)據(jù)的方法
這篇文章主要介紹了Bootstrap Table實(shí)現(xiàn)定時刷新數(shù)據(jù)的方法，在這里小編比較推薦使用第二種方法，需要的朋友參考下吧2018-08-08