JavaScript实现滑块验证码
本文实例为大家分享了JavaScript实现滑块验证码的具体代码，供大家参考，具体内容如下
效果：鼠标在底部滑块上按下按住不松拖动可以移动滑块，上面大图里面带有小图背景的滑块也会跟随移动，移动到大图背景缺少区域即可完成验证。以上效果要实现，需要鼠标按下（mousedown事件），鼠标松开（mouseup事件），鼠标移动（mousemove事件）这几个事件。
先制作html部分实现静态效果，大图里面可移动的小块背景大小与大图一致，给小图块的背景添加background-position属性来控制小图要显示的图片区域
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #34495e;
}
.wrap{
width: 600px;
margin: 100px auto;
}
.banner{
width: 600px;
height: 400px;
background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
background-size: 600px 400px;
position: relative;
}
.blank-box{
position: absolute;
top: 100px;
left: 200px;
width: 50px;
height: 50px;
background: #fff;
}
.block{
position: absolute;
top: 100px;
left: 0;
width: 50px;
height: 50px;
background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
background-size:600px 400px;
background-position:-200px -100px;
border: 1px solid red;
}
.move{
position: relative;
}
.move p{
height: 50px;
line-height: 50px;
font-size: 16px;
color: #666;
background: #eee;
text-align: center;
}
.move-block{
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background:#1abc9c;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="banner">
<div class="blank-box"></div>
<div class="block"></div>
</div>
<div class="move">
<p>移动滑块>>></p>
<div class="move-block"></div>
</div>
</div>
</body>
</html>
JS部分：
获取需要的dom元素，鼠标在底部滑块上按下时，才能移动，所以在这个滑块上绑定一个鼠标按下事件，在这个事件里通过event这个对象获取鼠标的坐标点并减去小块的偏移量来获取滑块移动的偏差值（鼠标的坐标点减去这个偏差值才是真实移动的距离），移动状态变为可滑动。
let banner=document.querySelector('.banner');
let blankBox=document.querySelector('.blank-box');
let block=document.querySelector('.block');
let moveBlock=document.querySelector('.move-block');
let isDrop=false;//是否可滑动
let x,y;//偏移量
moveBlock.onmousedown=function(e){
var e=e||window.event;
x=e.clientX - block.offsetLeft;
y=e.clientY - block.offsetTop;
isDrop=true;
}
当滑动状态为true时，用鼠标的坐标点减去这个偏差值，并对二个可移动的滑块重新定位。滑块滑动到大图缺少区域即为验证成功。
moveBlock.onmousemove=function(e){
if(isDrop){
var e=e||window.event;
let left= e.clientX-x;
block.style.left=left+'px';
moveBlock.style.left=left+'px';
//200大图里面缺失区域距离左边的位置
if(Math.abs(left-200)<=3){
alert('验证成功');
}
}
}
到这里已经初步实现效果了，但是滑块会超出大图的范围，需要给滑块的滑动距离加个限定，不然它会超出大图的范围，
moveBlock.onmousemove=function(e){
if(isDrop){
var e=e||window.event;
let left= e.clientX-x;
let maxX=banner.offsetWidth-block.offsetWidth;
//范围限定
if(left<0){
left=0
}
if(left>maxX){
left=maxX
}
block.style.left=left+'px';
moveBlock.style.left=left+'px';
//200大图里面缺失区域距离左边的位置
if(Math.abs(left-200)<=3){
alert('验证成功');
}
}
}
鼠标松开可移动状态变为false,为了防止移动过快，把事件绑定到document上
document.onmouseup=function(){
isDrop=false;
}
到这里效果已经实现了，如果想要背景大图的缺失区域是随机的可以加个，随机定位函数。
//随机定位
function randomPosition(){
/*随机数公式取 n-m之间的随机数 Math.random() * (m-n)+n*/
let ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
let ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);
blankBox.style.left=ranX+'px';
blankBox.style.top=ranY+'px';
block.style.top=ranY+'px';
block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
}
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #34495e;
}
.wrap{
width: 600px;
margin: 100px auto;
}
.banner{
width: 600px;
height: 400px;
background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
background-size: 600px 400px;
position: relative;
}
.blank-box{
position: absolute;
top: 100px;
left: 200px;
width: 50px;
height: 50px;
background: #fff;
}
.block{
position: absolute;
top: 100px;
left: 0;
width: 50px;
height: 50px;
background: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
background-size:600px 400px;
background-position:-200px -100px;
border: 1px solid red;
}
.move{
position: relative;
}
.move p{
height: 50px;
line-height: 50px;
font-size: 16px;
color: #666;
background: #eee;
text-align: center;
}
.move-block{
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
background:#1abc9c;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="banner">
<div class="blank-box"></div>
<div class="block"></div>
</div>
<div class="move">
<p>移动滑块>>></p>
<div class="move-block"></div>
</div>
</div>
<script>
let banner=document.querySelector('.banner');
let blankBox=document.querySelector('.blank-box');
let block=document.querySelector('.block');
let moveBlock=document.querySelector('.move-block');
let isDrop=false;//是否可滑动
let x,y,targetleft;//偏移量,左边定位距离
moveBlock.onmousedown=function(e){
var e=e||window.event;
x=e.clientX - block.offsetLeft;
y=e.clientY - block.offsetTop;
isDrop=true;
}
moveBlock.onmousemove=function(e){
if(isDrop){
var e=e||window.event;
let left= e.clientX-x;
let maxX=banner.offsetWidth-block.offsetWidth;
//范围限定
if(left<0){
left=0
}
if(left>maxX){
left=maxX
}
block.style.left=left+'px';
moveBlock.style.left=left+'px';
//200大图里面缺失区域距离左边的位置
if(Math.abs(left-targetleft)<=5){
alert('验证成功');
}
}
}
document.onmouseup=function(){
isDrop=false;
}
//随机定位
function randomPosition(){
/*随机数公式取 n-m之间的随机数 Math.random() * (m-n)+n*/
let ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100);
let ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0);
targetleft=ranX;
blankBox.style.left=ranX+'px';
blankBox.style.top=ranY+'px';
block.style.top=ranY+'px';
block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
}
randomPosition()
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
本文实例讲述了php+js实现的拖动滑块验证码验证表单操作.分享给大家供大家参考,具体如下: 现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能.现在很多极验都是第三方的,也很多都是收费的.今天在这里给大家分享自己用原生php实现的一个极验的代码.用原生php的好处就是以后你要嵌套到什么框架,可以直接用核心代码,改一改就好了. 极验拖动动画图 代码文件截图 代码实现 html文件 <!DOCTYPE
-
javascript实现支付宝滑块验证码效果
支付宝的滑块验证效果,又刷新了大家对于验证码的认知,这种滑块效果,改善了用户体验.除了它外观和用户体验上的优秀外,其实它的安全性也并未降低,后端对用户行为的分析依然保证了安全校验. 下面我们在此介绍一下,滑块效果的前端实现. 涵盖的内容主要: 滑块前端样式(html排版),滑块的闪光移动效果(CSS3 动画),以及滑块滑动脚本的编写(javascript 移动,点击,拖拽事件的编写.) 备注: 本实例基于网上Demo 增添 CSS效果 和 修复 JS BUG 等问题.大家直接粘贴代码到对应的文件
-
Node.JS用纯JavaScript生成图片或滑块式验证码功能
有一些Node.JS图片生成类库,比如node-captcha等的类库,需要c/c++程序生成图片.跨平台部署不是很方便.这里介绍几个用纯JS实现的图片验证码生成模块. captchapng 用纯JavaScript实现的验证码生成模块. https://github.com/GeorgeChan/captchapng 安装简单,依赖少: npm install captchapng 示例: var captchapng = require('captchapng'); app.get('/si
-
JavaScript实现滑块验证码
本文实例为大家分享了JavaScript实现滑块验证码的具体代码,供大家参考,具体内容如下 效果:鼠标在底部滑块上按下按住不松拖动可以移动滑块,上面大图里面带有小图背景的滑块也会跟随移动,移动到大图背景缺少区域即可完成验证.以上效果要实现,需要鼠标按下(mousedown事件),鼠标松开(mouseup事件),鼠标移动(mousemove事件)这几个事件. 先制作html部分实现静态效果,大图里面可移动的小块背景大小与大图一致,给小图块的背景添加background-position属性来控制小
-
基于JavaScript短信验证码如何实现
我们在使用移动.电信等运营商网上营业厅的时候,为确保业务的完整和正确性,经常会需要用到短信的验证码.最近因为某省业务需要,也做了个类似的功能. 原理很简单,就是在用户点击"获取验证码"的时候,Ajax获取一串固定位数的数字,然后写数据库发短信,写Cookie设置验证码的有效期. JS请求验证码如下: $.ajax({ type: "GET", url: "../Ajax/smsrandcodetest.ashx?phone=" + phone.v
-
python3 破解 geetest（极验）的滑块验证码功能
下面一段代码给大家介绍python破解geetest 验证码功能,具体代码如下所示: from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.common.action_chains import ActionChains import PIL.Image as image import time,re, random import
-
OpenCV搞定腾讯滑块验证码的实现代码
前言 废话 滑块验证码破解是一直都想搞的项目,毕竟多数网站都会采用滑块验证码,于是最近在修改论文的闲暇之余把这事儿给解决了.要搞现在的滑块验证码绕不开图像处理,图像处理当然是首推OpenCV-Python啦!当然我的OpenCV非常菜(P.S.两天速成不敢保证代码质量),发现问题就直接指出嘛,不用走流程啦! 环境 首先需要一个python,然后安装opencv的python库,如下: pip install opencv-python 然后测试一下是否可用,如下: import cv2 as c
-
python滑块验证码的破解实现
破解滑块验证码的思路主要有2种: 获得一张完整的背景图和一张有缺口的图片,两张图片进行像素上的一一对比,找出不一样的坐标. 获得一张有缺口的图片和需要验证的小图,两张图片进行二极化以及归一化,确定小图在图片中间的坐标. 之后就要使用初中物理知识了,使用直线加速度模仿人手动操作 本次就使用第2种,第一种比较简单.废话不多说,直接上代码: 以下均利用无头浏览器进行获取 获得滑块验证的小图片 def get_image1(self,driver): """ 获取滑块验证缺口小图片
-
Python模拟登录之滑块验证码的破解(实例代码)
模拟登录之滑块验证码的破解,具体代码如下所示: # 图像处理标准库 from PIL import Image # web测试 from selenium import webdriver # 鼠标操作 from selenium.webdriver.common.action_chains import ActionChains # 等待时间 产生随机数 import time, random # 滑块移动轨迹 def get_tracks1(distance): # 初速度 v = 0 #
-
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
准备工作 B站登录页 https://passport.bilibili.com/login python3 pip install selenium (webdriver框架) pip install PIL (图片处理) chrome driver:http://chromedriver.storage.googleapis.com/index.html firefox driver:https://github.com/mozilla/geckodriver/releases B站的滑块验
-
JavaScript实现简单验证码
JavaScript实现简单验证码,供大家参考,具体内容如下 验证流程图 HTML部分 ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&quo
-
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
一.滑块验证码简述 有爬虫,自然就有反爬虫,就像病毒和杀毒软件一样,有攻就有防,两者彼此推进发展.而目前最流行的反爬技术验证码,为了防止爬虫自动注册,批量生成垃圾账号,几乎所有网站的注册页面都会用到验证码技术.其实验证码的英文为 CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart),翻译成中文就是全自动区分计算机和人类的公开图灵测试,它是一种可以区分用户是计算机还是人的测试,只要能通