本文修改自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. Hadoop2学习路程-HDFS

    什么是Hadoop HDFS? Hadoop 分布式文件系统是世界上最可靠的文件系统.HDFS可以再大量硬件组成的集群中存储大文件. 它的设计原则是趋向于存储少量的大文件,而不是存储大量的小文件. 即 ...

  2. 一、Django初级

    创建项目,也就是网站 1.cmd,输入:pip3 install Django==2.1.2 2.>>>import django 3.cmd进入需要建项目的文件夹,django-a ...

  3. Qt——父对象、布局

    设置父对象两个好处:(1)加入析构树(2)和父对象一起显示 设置布局后,子控件自动被设置父对象 设置父对象两个好处:(1)加入析构树(2)和父对象一起显示

  4. silverlight 图形报表开发

    前端: <UserControl x:Class="SLThree.CharReport" xmlns="http://schemas.microsoft.com/ ...

  5. 成都Uber优步司机奖励政策（3月23日）

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

  6. MySql 使用explain分析查询

    今天写了个慢到哭的查询,想用explain分析下执行计划,后来发现explain也是有局限性的: EXPLAIN不会告诉你关于触发器.存储过程的信息或用户自定义函数对查询的影响情况 •EXPLAIN不 ...

  7. 基于套接字通信的简单练习（FTP）

    本项目基于c/s架构开发(采用套接字通信,使用TCP协议) FTP-Socket"""__author:rianley cheng""" 功 ...

  8. VINS（九）Ceres Solver优化（未完待续）

    使用Ceres Solver库处理后端优化问题,首先系统的优化函数为

  9. springBoot RabbitMq 转换json序列化

    package com.alirm.redis_cache.config.RabbitMQ; import org.springframework.amqp.rabbit.core.RabbitTem ...

  10. Linux用户及权限

    库:lib 共享库:.so ,shared object, 权限: 用户,获取资源,服务的标识符 组,指派权限,标识符 进程:以某个用户的身份在进行,有属主和属组 安全上下文(security con ...