原生简单实现滑动解锁，和滑动拼图解锁

简单实现滑动解锁，效果图是这样的

<!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.offsetWidthdiv3.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.offsetWidthdiv3.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>

小白一个，有错误虚心接受批评，请多多指教

原生简单实现滑动解锁，和滑动拼图解锁相关推荐

pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
dw在php图片滑动切换效果,超简单的图片左右切换滑动
网上看过很多图片左右切换滑动的效果,不过大都是使用插件实现.插件虽方便,但是对于新手的学习并不是最好的.本文使用jquery这个由原生的JavaScript封装的库,用最简短的代码实现此功能效果预览 ...
android自定义滑块解锁,android 滑动解锁
通过android自定义View实现横向的滑动解锁,1.滑动到中间会自动返回到原始的位置,2.滑动到底部会自动解锁,会触发解锁的回调:首先看效果图如下: 实现以上部分一共分为三部分: 其中背景通过sh ...
android 手势识别（缩放单指滑动多指滑动）
Android P 手势识别 1.前提介绍: 2.单指相关 2.双指缩放 3.多指滑动. 4.总体识别代码 1.前提介绍: 关于Android 手势识别就是当前view 根据用户的不同touch行为, ...
写了个移动端可滑动（惯性滑动回弹）Vue导航栏组件 ly-tab
前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到n ...
android自定义滑动,Android自定义滑动刻度尺
一基础: 自定义View实现跟随手指滚动的刻度尺,实现了类似SeekBar的滑动选中效果.项目地址,欢迎star! UI图: 功能: 通过设置最小值跟最大值的范围,以及offset值.View将根据 ...
Android 7.1 增加屏幕边缘滑动事件(手势滑动)两种方式(Back,Home,Menu功能键) 免开启无障碍功能
目前公司在做新项目开发,项目目前是不让有Back,Home,Menu实体按键,这就导致了一个问题,点开其它应用无法返回到桌面, 当然些问题对于做开发的我们肯定是难不到的,如果我们开发碰到这问题肯定是a ...
html列表滑动字母索引,js实现做通讯录的索引滑动显示效果和滑动显示锚点效果...
只做实现..完全没考虑性能优化.所以我实现了以后特别卡. 第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上. 思路:监听touchmove事件,获取clientX和cli ...
vue弹出层滑动禁止背景跟着滑动_vue移动端弹起蒙层滑动禁止底部滑动操作
解决办法在蒙层弹起的时候将body设置为fixed定位在蒙层消失的时候将body恢复原位 popupVisible(newValue) { if (newValue) { document.bod ...

原生简单实现滑动解锁，和滑动拼图解锁

原生简单实现滑动解锁，和滑动拼图解锁相关推荐

最新文章

热门文章