本文修改自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. 帝国cms伪静态设置方法（收藏）

    众所周知,动态页面不利于收录和排名.伪静态可以完美的解决这问题,配合百度云加速CDN,可以让动态页面有静态页面一样快的访问速度. 今天开拓族给大家带来帝国CMS伪静态的详细设置方法. 1.栏目设置为动 ...

  2. 2.3 摄像头驱动_vivi驱动程序分析

    学习目标:熟悉vivi的调用过程,分析vivi程序源码的ioctl函数: 一.vivi虚拟视频驱动测试方法 当我们接上usb摄像头设备时,系统会自动给我们安装对应的usb设备驱动程序.如果下次直接测试 ...

  3. Qt——模态、非模态

    模态: 只能操作对话框非模态:要使用 QDialog *_d = new QDialog();_d->setattribute(Qt::WA_DeleteOnClose);_d->show ...

  4. 18CCPC网赛A 贪心

    Buy and Resell Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  5. 为什么我要放弃javaScript数据结构与算法（第十一章）—— 算法模式

    本章将会学习递归.动态规划和贪心算法. 第十一章 算法模式 递归 递归是一种解决问题的方法,它解决问题的各个小部分,直到解决最初的大问题.递归通常涉及函数调用自身. 递归函数是像下面能够直接调用自身的 ...

  6. 20145207 myeclipse测试

    实验博客  

  7. 13 内建属性 _getattribute_ 内建函数

    1.内建属性 2.__getattribute__ 属性访问时拦截器 class Itcast(object): def __init__(self,subject1): self.subject1 ...

  8. ansible基础配置使用(一）

    test  test  test

  9. SSH项目中的困惑之一

    1.request.getContextPath()详解 <%=request.getContextPath()%>是为了解决相对路径的问题,可返回站点的根路径. 但不用也可以,比如< ...

  10. OSG-阴影

    本文转至http://www.cnblogs.com/shapherd/archive/2010/08/10/osg.html 作者写的比较好,再次收藏,希望更多的人可以看到这个文章 互联网是是一个相 ...