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