本文修改自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. yii学习笔记（6），连接数据库，创建活动记录类

    创建数据库用于测试 配置数据库连接 打开yii的配置文件目录下的数据库配置文件config/db.php <?php return [ 'class' => 'yii\db\Connect ...

  2. 学习新框架laravel4 第一天(- -! 新公司版本使用的4，所以还要重新学习)

    路由使用: //根目录 Route::get('/', function() { return View::make('hello'); }); 自定义模板: /app/views/home/inde ...

  3. hive新手学习随笔

    一.回顾    1.hive基于Hadoop的(存储HDFS,计算MR)    2.sql on hadoop概念            ->简化开发的操作            ->提升 ...

  4. 3.1 wifi网卡RT3070在S3C2440的移植和使用

    学习目标:熟悉RT3070在S3C2440的移植和使用,以及其中的相关工具的安装和使用: 一.配置内核选择WIFI驱动 1. 将usb wifi插到电脑,在ubuntu使用命令:# lsusb 查看w ...

  5. 20190112-自定义实现字符串的操作方法，如strip,upper,title,ljust,center,zfill,find,rfind等

    1:自定义实现strip()Python strip() 方法用于移除字符串头尾指定的字符(默认为空格或换行符)或字符序列算法:strip()仅移除首尾的指定字符,不能移除中间的先从首部开始移除 de ...

  6. django配置虚拟环境-1

    目录 安装python 使用venv虚拟环境 使用Virtualenv虚拟环境 ### Windows安装 方案一 方案二 Linux安装 其他命令 安装django 安装python https:/ ...

  7. Python文本操作2

    # list3 = [# {"name": "alex", "hobby": "抽烟"},# {"name&q ...

  8. mfc和qt的区别

    注:引用来源 http://wenda.chinabaike.com/b/30934/2013/1208/707410.html QT使用的编译器是MinGW,即Linux下的GCC移植到window ...

  9. HTML5心得

    1. 在做登录或搜索框的时候,可以为input加上autofocus属性,这样打开页面焦点自动在登录框或搜索框中.减少用户不必要的定位点击. 如<label>Search:<inpu ...

  10. 更改steam的游戏库

    用记事本打开steam/steamapps/libraryfolders.vdf,然后按照格式添加条目 "LibraryFolders"{ "TimeNextStatsR ...