本文修改自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. Delphi采用接口实现DLL调用

    Delphi使用模块化开发,可以采用DLL或者BPL,两者的区别是BPL只能被同版本的Delphi使用,DLL可以被不同版本和不同开发工具的开发的软件调用. 因此我们的软件大多使用Delphi作为界面 ...

  2. 『Python基础-3』变量、定义变量、变量类型、关键字Python基础-3』变量、定义变量、变量类型、关键字

    『Python基础-3』变量.定义变量.变量类型.关键字 目录: 1.Python变量.变量的命名 2.变量的类型(Python数据类型) 3.Python关键字 1. Python 变量.变量的命名 ...

  3. python爬xx图代码

    今日 好热,照样是挖洞挖不到,看了几天的python爬虫,学会了xpath解析 撸一个代码玩玩] 不要说什么,优化之类的,刚学完,跑了一阵 ,还可以  挺稳定 # -*- coding:utf-8 - ...

  4. Python之函数装饰器

    在实际中,我们可能需要在不改变函数源代码和调用方式的情况下,为函数添加一些新的附加功能,能够实现这种功能的函数我们将其称之为装饰器.装饰器本质上其实还是是一个函数,用来装饰其它函数,为函数添加一些附加 ...

  5. N个点中寻找多个最近两点的计算O(N²)

    #include<math.h> #include<stdio.h> #include<stdlib.h> typedef struct point { float ...

  6. Address already in use: JVM_Bind，tomcat启动异常

    严重: StandardServer.await: create[8050]: java.net.BindException: Address already in use: JVM_Bind tom ...

  7. PHP.52-TP框架商城应用实例-前台4-商品详情页-面包屑导航、AJAX浏览历史

    面包屑导航  思路:根据商品的主分类向上取出所有上级分类即可 1.在分类模型中增加取出所有上级分类的方法 /********** [面包屑导航]取出一个分类所有上级分类 **********/ pub ...

  8. P1294 高手去散步

    P1294 高手去散步 题目背景 高手最近谈恋爱了.不过是单相思.“即使是单相思,也是完整的爱情”,高手从未放弃对它的追求.今天,这个阳光明媚的早晨,太阳从西边缓缓升起.于是它找到高手,希望在晨读开始 ...

  9. 拼接index

    import MySQLdb import sys db = MySQLdb.connect(host="127.0.0.1", # your host, usually loca ...

  10. beauifulsoup模块的介绍

    01   爬虫基础知识介绍 相关库:1.requests,re  2.BeautifulSoup   3.hackhttp 使用requests发起get,post请求,获取状态码,内容: 使用re匹 ...