滑动验证

先放效果图



<!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. Java日志 #01# 入门

    很多人在学习完一个东西之后就会忘掉自己作为初学者时的体验.. 例如刚接触git的时候自己也是一头雾水,然后别人问起来,老是会说:xxxx#!@#,就是这么回事儿,有什么不好懂的. 其实从不懂到懂,再到 ...

  2. MySQL备份与恢复-mydumper

    上一片博文中,我们说明了mysqldump的备份与恢复.因为mysqldump是单线程导出,单线程恢复的,因此备份与恢复的时间比较长! 首先来安装mydumper: 下载源码:https://gith ...

  3. 腾讯云 网站开启HTTPS

    下图是我站点的初始化样子,可以看到只是输出一个字符串,啥也没有,并且没有https. 这无所谓,因为我们的重点是https,而不是网站内容 接下来就是配置https的关键步骤了,其实只需要三步而已: ...

  4. c++中的header-only library

    不同于在java中,虽然在java中,有些第三方库只是做了桥接的功能,比如slf4j-log4j-api,但是在运行时他们仍然是需要的,所以最多只能说是松耦合做得很好. 但是在c++中,一般我们应用第 ...

  5. 【题解】Luogu P4363 [九省联考2018]一双木棋chess

    原题传送门 这道题珂以轮廓线dp解决 经过推导,我们珂以发现下一行的棋子比上一行的棋子少(或等于),而且每一行中的棋子都是从左向右依次排列(从头开始,中间没有空隙) 所以每下完一步棋,棋盘的一部分是有 ...

  6. GitHub git 命令思维导图

    GitHub git 命令思维导图 拖动图片至浏览器地址栏松手,点击回车看高清大图.

  7. Iris Classification on Tensorflow

    Iris Classification on Tensorflow Neural Network formula derivation \[ \begin{align} a & = x \cd ...

  8. Redhat6.4安装MongoDBv3.6.3

    运用后台+配置文件方式启动. 条件 下载mongodb-linux-x86_64-rhel62-3.6.3.tar 官网https://www.mongodb.com/download-center? ...

  9. 【Python52--爬虫1】

    一.Python如何访问互联网 采用urllib包来访问 二.理论 1.请问URL是“统一资源标识符”还是“统一资源定位符” URI是统一资源标识符,URL是统一资源定位符.即:URI是用字符串表示某 ...

  10. centOS6.8开放防火墙端口

    1.找到防火墙配置文件,/etc/sysconfig/iptables.如果是新装的linux系统,防火墙默认是被禁掉的,没有配置任何防火墙策略,所以不存在iptables.需要在控制台使用iptab ...