滑动验证

先放效果图



<!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. Modbus库开发笔记之十一：关于Modbus协议栈开发的说明（转）

    源: Modbus库开发笔记之十一:关于Modbus协议栈开发的说明

  2. 使用Ajax出现302 Moved Temporarily

    现象:在用ajax发送请求时,各种参数都对,地址也对,一直进error返回parse error. 使用浏览器发现ajax请求的header的响应码处:302 Moved Temporarily 百度 ...

  3. bzoj2120 / P1903 [国家集训队]数颜色 / 维护队列（带修改莫队）

    P1903 [国家集训队]数颜色 / 维护队列 带修改的莫队 在原有指针$(l,r)$上又添加了时间指针$t$ 贴一段dalao的解释 带修改的莫队,和原版莫队相比,多了一个时间轴 原版莫队是将区间( ...

  4. Python3 根据m3u8下载视频，批量下载ts文件并且合并

    Python3 根据m3u8下载视频,批量下载ts文件并且合并 m3u8是苹果公司推出一种视频播放标准,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少 ...

  5. NLTK 知识整理

    NLTK 知识整理 nltk.corpus模块自带语料 NLTK comes with many corpora, toy grammars, trained models, etc. A compl ...

  6. RSD 直观介绍

    RSD TOR RSD SLED Blade MEMORY REDFISH REDFISH with Storage IPMI https://yyscamper.gitbooks.io/the-wa ...

  7. 锁(lock)和闩(latch)

    开发多用户.数据库驱动的应用时,最大的难点之一是:一方面要力争取得最大限度的并发访问,与此同时还要确保每个用户能以一致的方式读取和修改数据.为此就有了锁定(locking)机制,这也是所有数据库都具有 ...

  8. [c/c++] programming之路（1）、编写程序打开记事本、计算器等

    一.命令行启动程序 通过命令行关闭程序:taskkill /f /im 程序名.exe 二.打开记事本.计算器 #include <stdlib.h> void main(){ syste ...

  9. topcoder srm 545 div1

    problem1 link 这个可以贪心地从前向后构造.假设当前已经的字符串为$S$,对于一个字符$c$来说,设将$c$加到$S$后得到的新串为$S^{'}$.那么如果$X+Y+Z \ge minIn ...

  10. SSM集成activiti6.0错误集锦（二）

    项目环境 Maven构建 数据库:Orcle12c 服务器:Tomcat9 <java.version>1.8</java.version> <activiti.vers ...