滑动验证

先放效果图



<!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. php 接收blob数据流，base64数据流 转为 blob二进制数据流

    php正常接收参数的方式如下:$_GET$_POST$_REQUEST 但是如果跨语言接收请求参数的话,可能会出现一系列的问题,其他语言的http请求可能是基于数据流的概念来传递参数的,如果按照常规处 ...

  2. git小技巧--如何从其他分支merge个别文件或文件夹

    在实际工作中,一个大型的项目或版本迭代可能不是一次上线,可能会分好几次上线,这时候就会涉及创建多个分支,进行分别开发. 创建分支 功能分为2个分支,分别为A.B. A上面有个列表页功能 B上面有个详情 ...

  3. openstack tap complete

    $ openstack complete > /etc/bash_completion.d/osc.bash_completion re-login and bash

  4. wireshark抓包的过滤规则

    使用wireshark抓包的过滤规则.1.过滤源ip.目的ip.在wireshark的过滤规则框Filter中输入过滤条件.如查找目的地址为192.168.101.8的包,ip.dst==192.16 ...

  5. gitlab服务器迁移

    公司更换了新的服务器,需要把原先的gitlab迁移到新的服务器上. 1.迁移准备工作和思路:从a服务器迁移到b服务器,由于Gitlab自身的兼容性问题,高版本的Gitlab无法恢复低版本备份的数据,需 ...

  6. 桌面版Ubuntu系统固定IP设置和Network-manager设置

    我自己的学校是绑定MAC和IP上网的.这种方法名义上说是为了安全,不过是个搞计算机的都知道随便修改一下MAC就可以使用别人的IP了. 不提蛋疼的事情了,先来说说网络的配置吧 我用的是Ubuntu14. ...

  7. DOM元素加载之前执行的jQuery代码

    <script type="text/javascript"> (function() { alert("DOM还没加载哦!"); })(jQuer ...

  8. 前端 --- 1 HTML

    一.文档结构 <!DOCTYPE html> <html lang="zh-CN"> #这个lang表示语言,zh-CN是中文的意思, 如果以英文为主,就写 ...

  9. Android中activity的四个启动模式

    activity的四个启动方式分别是standard.singletop.singletask.singleinstance.第一个其实就是只要新打开活动就会新建一个实例.第二个顾名思义返回栈的顶部只 ...

  10. Android 源码编译 指定userdata.img、system.img、cache.img容量大小【转】

    本文转载自:https://blog.csdn.net/baodinglaolang/article/details/49791041 修改build/target/board/generic_x86 ...