滑动验证

先放效果图



<!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. NOI2018 网络同步赛的启示

    D1D2一共6题,暴露出我的许多问题 D1 T1 100 T2 8 T3 0 D2 T1 90? T2 15? T3 0 D1T1:决不能在noip之后便不再写dijkstra 不再写kruskal和 ...

  2. jdk和二进制 常量.变量

    java中的jdk和jre之间的关系 二进制和十进制之间的转换问题 使用的方法是碾转相除法:就是让一个数除以2,取余数,除到商为0为止,然后倒着将余数组合起来. 入门案例  HelloWorld /* ...

  3. JDK源码之ReentrantLock

    1.定义 ReentrantLock是一种可重入锁,允许一个线程对同一个资源重复加锁,如果说是当一个线程调用一个锁的lock()方法,然后再次调用锁的lock()方法,当锁不支持可重入时,该线程会被自 ...

  4. Android之xml解析

    利用类下载器解析Xml文件要解析的xml文件<?xml version="1.0" encoding="utf-8"?><info> & ...

  5. python之路-day1-if...else...流程判断

    判断输入的用户名:#Author:zww _username = "zww" _password = " username = input("username: ...

  6. 20145325张梓靖 《网络对抗技术》 Web基础

    20145325张梓靖 <网络对抗技术> Web基础 实验内容 开启apahce,设计web前端HTML 设计web前端javascipt 设计web后端mysql 设计web后端php ...

  7. dajie项目的坑

    1.首先IDEA巨坑无比的地方是引入时,只要哪怕一个依赖下载不到,就会长期阻塞,删除.重新引入都没用!! 2.注释掉项目及其子项目中所有pom.xml中引用的spring仓库,否则即使maven配置阿 ...

  8. 【重新分配分片】Elasticsearch通过reroute api重新分配分片

    elasticsearch可以通过reroute api来手动进行索引分片的分配. 不过要想完全手动,必须先把cluster.routing.allocation.disable_allocation ...

  9. How to know the directory size in CENTOS 查看文件夹大小

    Under any linux system, you want to use the command du. (Disk Usage) Common usage is : du -sh file(s ...

  10. dfs序七个经典问题

    update-2018.07.23: 原文问题五思路描述有误,已更正. 参考自:<数据结构漫谈>-许昊然 dfs序是树在dfs先序遍历时的序列,将树形结构转化成序列问题处理. dfs有一个 ...