滑动验证 和滑动图片验证JS
滑动验证
先放效果图
<!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">>></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 = "√";
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的更多相关文章
- 完整说明使用SpringBoot+js实现滑动图片验证
常见的网站验证方式有手机短信验证,图片字符验证,滑块验证,滑块图片验证．本文主要讲解的是滑块图片验证的实现流程．包括后台和前端的实现． 实现效果 使用的API java.awt.image.Buffe ...
- 极验反爬虫防护分析之slide验证方式下图片的处理及滑动轨迹的生成思路
本文要分享的内容是去年为了抢鞋而分析 极验(GeeTest)反爬虫防护的笔记,由于篇幅较长(为了多混点CB)我会按照我的分析顺序,分成如下四个主题与大家分享: 极验反爬虫防护分析之交互流程分析 极验反 ...
- c# 简单的滑动图片验证
普通的验证码对用户使用体验不友好,出现了滑动图片验证的验证方式,用户只要按住滑块完成图片的拼接即可通过验证(这是最简单的方式,滑动轨迹,数据分析,滑行速度 什么的暂没考虑) 主要的实现思路: 1.先从 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...
- jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 学习 ...
- jQuery插件之验证控件jquery.validate.js
今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
随机推荐
- Hbuilder安装
---恢复内容开始--- ---恢复内容结束---
- Torch或Numpy
1.什么是NumpyNumpy系统是Python的一种开源的数值计算扩展,用python实现的科学计算包.这种工具可用来存储和处理大型矩阵,包括强大的N维数组对象Array,比较成熟的函数库等.num ...
- mysql启动、关闭与登录
按照上述三篇随笔中的方法安装mysql,其启动.关闭和登录方法如下. mysql启动基本原理:/etc/init.d/mysqld是一个shell启动脚本,启动后最终会调用mysql\bin\mysq ...
- MyBatis批量更新
逐条更新 这种方式显然是最简单,也最不容易出错的,即便出错也只是影响到当条出错的数据,而且可以对每条数据都比较可控. 代码 updateBatch(List<MyData> datas){ ...
- 比beanutil更加灵活的dto转换工具dozer
准确的说,是因为pojo无法一招走天下或者说内外部隔离的原因,所以有些时候,不得不在两个bean之间做copy或者转换映射.对于直接性的属性拷贝beanutil以及能够满足大部分要求,但是如果遇到字段 ...
- 百度uid-generator源码
https://github.com/baidu/uid-generator snowflake算法 uid-generator是基于Twitter开源的snowflake算法实现的. snowfla ...
- promql查询表达式
Basics 即时矢量选择器 =:匹配与标签相等的内容!=:不匹配与标签相等的内容=~: 根据正则表达式匹配与标签符合的内容!~:根据正则表达式不匹配与标签符合的内容 示例: http_request ...
- 尚硅谷面试第一季-15Mysql什么时候建索引
课堂重点: MySQL的官方定义: 索引的优势: 索引的劣势: 那些情况下需要建立索引: 那些情况下不要建立索引: 何为过滤性:例如在数据库字段里,手机号/身份证号这些字段是过滤性好的字段,而性别则是 ...
- django基础 -- 2. django初识
一.模块渲染 jinja2 实现简单的字符串替换(动态页面) 1.下载 pip install jinja2 示例 : html文件中 <!DOCTYPE html> <html ...
- Logger级别和输出的地方
转载自http://blog.csdn.net/u014756827/article/details/52475990 log4j日志配置 关键字: apache log4j 1.配置根Logger: ...