本文修改自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">&gt;&gt;</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 = "&radic;";

                 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移动端滑块验证解锁组件的更多相关文章

  1. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

  2. 原生js实现拖动滑块验证

    拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

  3. Vue.js 桌面端自定义滚动条组件|vue美化滚动条VScroll

    基于vue.js开发的小巧PC端自定义滚动条组件VScroll. 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue ...

  4. js 拖动滑块验证

    备注:拖动滑块时尽量平移,chrome浏览器上没有卡顿情况,但是搜狗极速模式和360极速模式都遇到了卡顿,拖不动情况,应是浏览器内部对事件响应速度导致吧. JS代码: ;(function ($,wi ...

  5. layui扩展组件sliderVerify 实现滑块验证

    首先在要使用的静态文件代码中引入‘./sliderVerify/sliderVerify.js‘ 先看看效果 示例代码 <!DOCTYPE html> <html> <h ...

  6. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  7. jQuery手机触屏拖动滑块验证跳转插件

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...

  8. Nuxt.js服务端渲染实践，从开发到部署

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

  9. 抖音 滑块验证方案 s_v_web_id 参数分析

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! 抖音web端 s_v_web_id 参数 ...

随机推荐

  1. FireDAC的SQLite初探

    // uses FireDAC.VCLUI.Wait  之后, 可不用添加 TFDGUIxWaitCursor TFDConnection          // 数据连接 TFDQuery      ...

  2. 详解 Python3 正则表达式（二）

    上一篇:详解 Python3 正则表达式(一) 本文翻译自:https://docs.python.org/3.4/howto/regex.html 博主对此做了一些批注和修改 ^_^ 使用正则表达式 ...

  3. Java——异常处理---18.11.14

    异常时程序中会有一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. 比如说,你的代码少了一个分号,那么运行出来结果是提示是错误 java.lang.Error: 如果你用 System ...

  4. TensorFlow之tf.nn.dropout()：防止模型训练过程中的过拟合问题

    一:适用范围: tf.nn.dropout是TensorFlow里面为了防止或减轻过拟合而使用的函数,它一般用在全连接层 二:原理: dropout就是在不同的训练过程中随机扔掉一部分神经元.也就是让 ...

  5. 北京Uber优步司机奖励政策（1月9日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  6. 【转载】深入研究Windows内部原理绝对经典的资料

    原文:深入研究Windows内部原理绝对经典的资料 另一篇资料:深入研究Windows内部原理系列 (为了方便大家下,我打包了放在一下地址: 1-6:http://download.csdn.net/ ...

  7. 【NIS】深入了解NIS

    1  简介 NIS( NetworkInformation Service)提供了一个网络黄页的功能,当用户登录系统时,Linux系统会到NIS主机上去寻找用户使用的帐号密码信息加以比对,以提供用户登 ...

  8. 创龙DSP6748开发板上电测试-第一篇

    1. 创龙DSP6748开发板测试.2980元的售价很高,我估计新的1200元比较合适,当然创龙定价是按照供需关系的.仿真器XDS100V2卖598元,真是狮子大张口. 2. 上电是5V-2A的电源. ...

  9. Qt-QML-Slider-滑块-Style-后继

    首先了,先把我上篇文章的demo准备好,不过我上次写的被我删除了,这次就重新写了一个,上代码 import QtQuick 2.5 import QtQuick.Controls 1.4 import ...

  10. python 中的reload(sys)

    import sys  reload(sys)  sys.setdefaultencoding('utf-8') #python2中的使用方法 #重新载入 sys 模块,并设置默认编码为 utf8 & ...