js移动端滑块验证解锁组件
本文修改自PC端的js滑块验证组件，PC端使用的是onmousedown，onmouseup，nomousemove。原文找不到了，也是博客园文章，在此感谢广大网友的生产力吧。
说下对插件和组件的理解：组件是拥有静态dom的插件，所以说组件可以转为插件。如果组件的dom部分，动态创建了，那就可以变为插件。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>滑块验证解锁</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<style>
.drag {
width: 300px;
height: 40px;
line-height: 40px;
background-color: #e8e8e8;
position: relative;
margin: auto;
} .bg {
width: 40px;
height: %;
position: absolute;
background-color: #75CDF9;
} .text {
position: absolute;
width: %;
height: %;
text-align: center;
user-select: none;
} .btn {
width: 40px;
height: 38px;
position: absolute;
border: 1px solid #ccc;
cursor: move;
font-family: "宋体";
text-align: center;
background-color: #fff;
user-select: none;
color: #;
}
</style>
</head> <body>
<div class="drag">
<div class="bg"></div>
<div class="text" onselectstart="return false;">请拖动滑块解锁</div>
<div class="btn">>></div>
</div>
<script>
(function() {
//一、定义一个获取DOM元素的方法
var $ = function(selector) {
return document.querySelector(selector);
},
box = $(".drag"), //容器
bg = $(".bg"), //背景
text = $(".text"), //文字
btn = $(".btn"), //滑块
success = false, //是否通过验证的标志
distance = box.offsetWidth - btn.offsetWidth; //滑动成功的宽度（距离） //二、给滑块注册鼠标touchmove
btn.addEventListener("touchmove", function(e) { //1.鼠标按下之前必须清除掉后面设置的过渡属性
btn.style.transition = "";
bg.style.transition = ""; //说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。 //2.当滑块位于初始位置时，得到鼠标按下时的水平位置
var e = e || window.event;
var offsetX = e.touches[].clientX- btn.offsetWidth;
//三、给文档注册鼠标移动事件 //3.在这里判断一下：鼠标水平移动的距离 与 滑动成功的距离 之间的关系
if (offsetX > distance) {
offsetX = distance; //如果滑过了终点，就将它停留在终点位置
} else if (offsetX < ) {
offsetX = ; //如果滑到了起点的左侧，就将它重置为起点位置
} //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
btn.style.left = offsetX + "px";
bg.style.width = offsetX + "px"; //如果鼠标的水平移动距离 = 滑动成功的宽度,保证只滑动一次
if (offsetX == distance && !success) { //1.设置滑动成功后的样式
text.innerHTML = "验证通过";
text.style.color = "#fff";
btn.innerHTML = "√";
btn.style.color = "green";
bg.style.backgroundColor = "lightgreen"; //2.设置滑动成功后的状态
success = true;
//成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件） //3.成功解锁后的回调函数
setTimeout(function() {
alert('解锁成功！');
}, );
} })
btn.addEventListener("touchend", function(e) {
//如果鼠标松开时，滑到了终点，则验证通过 if (success) { return;
} else {
//反之，则将滑块复位（设置了1s的属性过渡效果）
btn.style.left = ;
bg.style.width = ;
//过渡属性设置
btn.style.transition = "left 1s ease";
bg.style.transition = "width 1s ease"; } })
})();
</script>
</body> </html>
本文结束。
js移动端滑块验证解锁组件的更多相关文章
- 原生JS实现拖动滑块验证登录效果
♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装 代码如下: <!DOCTYPE html> <htm ...
- 原生js实现拖动滑块验证
拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...
- Vue.js 桌面端自定义滚动条组件|vue美化滚动条VScroll
基于vue.js开发的小巧PC端自定义滚动条组件VScroll. 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue ...
- js 拖动滑块验证
备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...
- layui扩展组件sliderVerify 实现滑块验证
首先在要使用的静态文件代码中引入‘./sliderVerify/sliderVerify.js‘ 先看看效果 示例代码 <!DOCTYPE html> <html> <h ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- Nuxt.js服务端渲染实践，从开发到部署
感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...
- 抖音 滑块验证方案 s_v_web_id 参数分析
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! 抖音web端 s_v_web_id 参数 ...
随机推荐
- go内建容器-Map
1.基础定义 golang中的map如同它的函数一样"纯粹",map就是用来存储键值对的容器,别管什么哈希不哈希的(底层已实现),用就行 //创建一个map m := map[st ...
- Qt 学习之路 2
Qt 学习之路 2 | DevBean Tech World Qt 学习之路 2 Qt 学习之路 2 目录
- Android 模拟器下载、编译及调试
Android 模拟器源码下载 Android 模拟器源码的下载与 Android AOSP 源码库的下载过程类似,可以参考 Google 官方提供的 Android 源码下载文档 来了解这个过程. ...
- LOB类型的学习、总结
LOB相关的概念 LOB类型: 将信息文件(十进制.二进制).图像甚至音频信息采用数据库作为保存载体时,就需要使用lob类型数据. 有两种Lob,Internal Lob和External Lob.I ...
- Net Core学习笔记
Net Core 官网:https://dotnet.github.io/ Net Core Api: https://docs.microsoft.com/en-us/dotnet/api/?vie ...
- 编译Chromium出现warning C4819的解决办法
编译Chromium时出现 warning C4819: The file contains a character that cannot be represented in the current ...
- CentOS安装nmon
nmon官网: http://nmon.sourceforge.net/pmwiki.php?n=Main.HomePage 下载nmon16e_mpginc.tar.gz到本地并上传到服务器 tar ...
- [CodeForce721C]Journey
题目描述 Recently Irina arrived to one of the most famous cities of Berland - the Berlatov city. There a ...
- 使用flask_limiter设定API配额
前言 闲来无事,突然想到了以前做过的关于后台API安全方面的事,关于接口访问配额的设置,flask有没有很好的库支持呢?一找还真有!主要是对照了库的官方文档自己写了下dome,以供参考. # -*- ...
- MySQL数据库怎么截取字符串？
函数: 1.从左开始截取字符串 left(str, length) 说明:left(被截取字段,截取长度) 例:select left(content,200) as abstract from my ...