滑动验证

先放效果图



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>滑块验证解锁</title>

    <style>

        .drag{

            width: 300px;

            height: 40px;

            line-height: 40px;

            background-color: #e8e8e8;

            position: relative;

            margin:0 auto;

        }

        .bg{

            width:40px;

            height: 100%;

            position: absolute;

            background-color: #75CDF9;

        }

        .text{

            position: absolute;

            width: 100%;

            height: 100%;

            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:#666;

        }

    </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>

        //一、定义一个获取DOM元素的方法

        var $ = function(selector){

                return  document.querySelector(selector);

            },

            box = $(".drag"),//容器

            bg = $(".bg"),//背景

            text = $(".text"),//文字

            btn = $(".btn"),//滑块

            success = false,//是否通过验证的标志

            distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度（距离）

        //二、给滑块注册鼠标按下事件

        btn.onmousedown = function(e){

            //1.鼠标按下之前必须清除掉后面设置的过渡属性

            btn.style.transition = "";

            bg.style.transition ="";

            //说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。

            //2.当滑块位于初始位置时，得到鼠标按下时的水平位置

            var e = e || window.event;

            var downX = e.clientX;

            //三、给文档注册鼠标移动事件

            document.onmousemove = function(e){

                var e = e || window.event;

                //1.获取鼠标移动后的水平位置

                var moveX = e.clientX;

                //2.得到鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）

                var offsetX = moveX - downX;

                //3.在这里判断一下：鼠标水平移动的距离 与 滑动成功的距离 之间的关系

                if( offsetX > distance){

                    offsetX = distance;//如果滑过了终点，就将它停留在终点位置

                }else if( offsetX < 0){

                    offsetX = 0;//如果滑到了起点的左侧，就将它重置为起点位置

                }

                //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度

                btn.style.left = offsetX + "px";

                bg.style.width = offsetX + "px";

                //如果鼠标的水平移动距离 = 滑动成功的宽度

                if( offsetX == distance){

                    //1.设置滑动成功后的样式

                    text.innerHTML = "验证通过";

                    text.style.color = "#fff";

                    btn.innerHTML = "&radic;";

                    btn.style.color = "green";

                    bg.style.backgroundColor = "lightgreen";

                    //2.设置滑动成功后的状态

                    success = true;

                    //成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）

                    btn.onmousedown = null;

                    document.onmousemove = null;

                    //3.成功解锁后的回调函数

                    setTimeout(function(){

                        alert('解锁成功！');

                    },100);

                }

            }

            //四、给文档注册鼠标松开事件

            document.onmouseup = function(e){

                //如果鼠标松开时，滑到了终点，则验证通过

                if(success){

                    return;

                }else{

                    //反之，则将滑块复位（设置了1s的属性过渡效果）

                    btn.style.left = 0;

                    bg.style.width = 0;

                    btn.style.transition = "left 1s ease";

                    bg.style.transition = "width 1s ease";

                }

                //只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。

                document.onmousemove = null;

                document.onmouseup = null;

            }

        }

    </script>

</body>

</html>

滑动图片验证

先放效果图





来自 http://www.cnblogs.com/huaji666/p/8257710.html

滑动验证 和滑动图片验证JS的更多相关文章

  1. 完整说明使用SpringBoot+js实现滑动图片验证

    常见的网站验证方式有手机短信验证,图片字符验证,滑块验证,滑块图片验证．本文主要讲解的是滑块图片验证的实现流程．包括后台和前端的实现． 实现效果 使用的API java.awt.image.Buffe ...

  2. 极验反爬虫防护分析之slide验证方式下图片的处理及滑动轨迹的生成思路

    本文要分享的内容是去年为了抢鞋而分析 极验(GeeTest)反爬虫防护的笔记,由于篇幅较长(为了多混点CB)我会按照我的分析顺序,分成如下四个主题与大家分享: 极验反爬虫防护分析之交互流程分析 极验反 ...

  3. c# 简单的滑动图片验证

    普通的验证码对用户使用体验不友好,出现了滑动图片验证的验证方式,用户只要按住滑块完成图片的拼接即可通过验证(这是最简单的方式,滑动轨迹,数据分析,滑行速度 什么的暂没考虑) 主要的实现思路: 1.先从 ...

  4. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  5. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  6. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...

  7. jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 学习 ...

  8. jQuery插件之验证控件jquery.validate.js

    今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...

  9. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

随机推荐

  1. APP端上传图片 - php接口

    $base64="iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAbRJREFUSIntlDFPFF ...

  2. curl 异步捉取数据类

    <?php class RequestLib { /** * GET 请求 * @param string $url */ public static function http_get($ur ...

  3. Python3 离线安装TensorFlow包

    Python3 离线安装TensorFlow包 1,下载包 官网地址:https://pypi.org/project/tensorflow/1.1.0rc2/#files 清华镜像:https:// ...

  4. 01：jQuery的下拉选select2插件用法

    1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...

  5. oracle_sqlplus命令行乱码问题解决

    在linux以及unix中,sqlplus的上下左右.回退无法使用,会出现乱码情况. 而rlwrap这个软件就是用来解决这个的. 首先下载rlwrap包:https://linux.linuxidc. ...

  6. js通过 URL下载文件

    页面上一个button,点击之后触发一个function去请求数据,返回 pdf/epub 的URL,然后下载这个文件. 本来是直接用 a 写的,href里放资源地址,target设为'_blank' ...

  7. win7 下安装使用 nginx 出现500错误

    配置虚拟主机域名后访问网站出现500错误,发现是因为路径的反斜杠问题,改成正斜杠后问题解决.

  8. 【VNC】修改VNC分辨率大小

    [VNC]修改VNC分辨率大小 VNC的分辨率过小有可能导致图形化界面操作过程中遇到"确认键或取消键"无法点击,分辨率过高又可能导致低分辨率客户端显示器无法显示.本文给出两种调整V ...

  9. 20145326蔡馨熤《网络对抗》—— Web基础

    20145326蔡馨熤<网络对抗>—— Web基础 1.实验后回答问题 (1)什么是表单. 表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素,表单在网页中主要负责数据 ...

  10. python --- 21 MRO C3算法

    一.python2.2之前用的是   经典类的MRO继承 ①深度递归继承     从左到右 ,一条路走到黑 ②广度继承           一层一层的继承 深度继承时   为   R 1 2 3 4 ...