开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery拖动滑块进行图片拼合验证

基础概念

jQuery拖动滑块进行图片拼合验证是一种常见的前端交互验证方式，主要用于防止机器人或自动化脚本的恶意操作。用户需要通过拖动滑块将图片拼合完整，才能通过验证。

相关优势

用户体验好：拖动滑块验证比传统的验证码更直观、友好，用户体验更好。
安全性高：相比于简单的验证码，拖动滑块验证更难被自动化脚本破解。
灵活性强：可以根据需求自定义滑块的样式和验证逻辑。

类型

水平拖动滑块：用户需要将滑块拖动到指定位置。
垂直拖动滑块：用户需要将滑块拖动到指定位置。
拼图验证：用户需要将多个碎片拼合成完整的图片。

应用场景

注册页面：防止机器人注册。
登录页面：防止暴力破解密码。
表单提交：防止恶意提交表单。

示例代码

以下是一个简单的jQuery拖动滑块验证的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖动滑块验证</title>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 100px;
            border: 1px solid #ccc;
        }
        .slider {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #4CAF50;
            cursor: pointer;
        }
        .target {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="slider" id="slider"></div>
        <div class="target" id="target"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var slider = $('#slider');
            var target = $('#target');
            var isDragging = false;
            var startX, startLeft;

            slider.on('mousedown', function(e) {
                isDragging = true;
                startX = e.pageX;
                startLeft = parseInt(slider.css('left'), 10);
            });

            $(document).on('mousemove', function(e) {
                if (isDragging) {
                    var offsetX = e.pageX - startX;
                    var newLeft = Math.min(Math.max(0, startLeft + offsetX), target.parent().width() - slider.width());
                    slider.css('left', newLeft + 'px');
                }
            });

            $(document).on('mouseup', function() {
                if (isDragging) {
                    isDragging = false;
                    if (Math.abs(parseInt(slider.css('left'), 10) - parseInt(target.css('left'), 10) < 5) {
                        alert('验证成功！');
                    } else {
                        alert('验证失败，请重试！');
                        slider.css('left', '0px');
                    }
                }
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

滑块拖动不流畅：
- 原因：可能是由于浏览器性能问题或代码优化不足。
- 解决方法：优化代码，减少不必要的DOM操作，使用requestAnimationFrame进行动画处理。

滑块位置不准确：
- 原因：可能是由于计算位置时的误差。
- 解决方法：确保在计算滑块位置时使用精确的数值，避免浮点数误差。
验证逻辑不严谨：
- 原因：可能是验证逻辑存在漏洞。
- 解决方法：仔细检查验证逻辑，确保在各种情况下都能正确判断用户操作的有效性。

通过以上示例代码和解决方法，你可以实现一个基本的拖动滑块验证功能，并根据需要进行优化和扩展。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

拖动滑块验证

-- 滑块 --> <!...const verifyBtn = document.querySelector(".verify-btn"); // 获取滑块宽度 const { offsetWidth...console.log({ isMostRight }); if (isMostRight) { // 成功验证逻辑...// 此处可以改为你自定义逻辑 console.log('验证成功'); //...这里首先替换了按钮内的文本 verifyBtn.innerHTML = `验证成功☕`

3.2K2 0

jQuery仿淘宝登录拖动滑块验证插件优化版

今天写项目的时候需要一个拖动滑块验证功能，就在网上找了一个，但是有一点小 bug ，我优化了一下，分享给大家。...效果如下图： CSS： /* 拖动验证 www.w3h5.com */ #drag{ position: relative; background-color: #e8e8e8...ms-user-select:none; color: #2F4050; } JS： /* * drag 1.0 * create by www.w3h5.com * date 2015-08-18 * 拖动滑块.../div>'+ '拖动滑块验证... $(document).unbind('mousemove'); $(document).unbind('mouseup'); } }; })(jQuery

2703 0

jQuery仿淘宝登录拖动滑块验证插件优化版

今天写项目的时候需要一个拖动滑块验证功能，就在网上找了一个，但是有一点小 bug ，我优化了一下，分享给大家。效果如下图： ?...CSS： /* 拖动验证 www.w3h5.com */ #drag{ position: relative; background-color: #e8e8e8; ...ms-user-select:none; color: #2F4050; } JS： /* * drag 1.0 * create by www.w3h5.com * date 2015-08-18 * 拖动滑块.../div>'+ '拖动滑块验证...声明：本文由w3h5原创，转载请注明出处：《jQuery仿淘宝登录拖动滑块验证插件优化版》 https://www.w3h5.com/post/371.html (adsbygoogle

2K2 0

移动端拖动滑块验证

夫唯不争，故天下莫能与之争——老子之前写过拖动滑块验证但是发现移动端拖不动了因为移动端使用的是touch事件：https://developer.mozilla.org/zh-CN/docs/Web.../API/TouchEvent 我们对其进行改造，通过获取其第一个触控点的坐标进行计算 <!...console.log({ isMostRight }); if (isMostRight) { // 成功验证逻辑...// 此处可以改为你自定义逻辑 console.log('验证成功'); //...这里首先替换了按钮内的文本 verifyBtn.innerHTML = `验证成功☕`

1.7K3 0

原生JS封装拖动验证滑块你会吗？

最终效果微信图片_20200911093415.gif 分析看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup 其次要支持用户传入放置这个组件的...我们先来看下使用方式，再来决定我们怎么编写这个库微信图片_20200911093435.jpg 具体使用就是这样的，我们还想用户能通过import等方式使用，所以我们就要支持esMoudule的导入方式...} }()); 代码块1是在判断是在浏览器环境还是nodeJS环境，方便代码三后期使用，代码块2声明了一个对象SliderTools,将用户传进来的option和默认的defaultOption进行合并...">拖动滑块验证...">拖动滑块验证

5.9K5 0

原生JS封装拖动验证滑块你会吗？

} }()); 代码块1是在判断是在浏览器环境还是nodeJS环境，方便代码三后期使用，代码块2声明了一个对象SliderTools,将用户传进来的option和默认的defaultOption进行合并...">拖动滑块验证...= null //防止拖动完成后再次拖动 self.emit('complete')//emit通知使用者的回调事件 } else {...">拖动滑块验证...= SliderTools; } }()); let slider = new SliderTools(); slider.on('complete',() => { alert('验证完成

5.7K4 0

php+js实现极验，拖动滑块验证码验证表单

应用场景现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录，这种方式比传统的验证码方式有更好的体验，减少用户输入的错误，也同样能起到防盗刷的功能。...极验拖动动画图：图片代码文件截图图片 html文件极验滑块拖动验证码...text-align: center;margin: 100px auto;"> $TN.onsuccess(function(){//验证成功...0-100 }else{ $type = 'png'; $quality = 7;//图片质量 0-9 }

3.9K3 0

一个简单的滑块拖动验证码实例

使用这种验证方法的目的：证明当前的用户不是机器人~防止恶意操作。...注意：哪怕鼠标移动的时候超出了最外面的方块区域，滑块也要可以移动。所以不能只在滑块上设置移动事件，需要在文档document上设置移动事件。...：改变滑块的left值。...style> 滑块拖拽验证...document.onmousemove = null; silde.onmousedown = null; // rect.innerHTML = '验证成功

2K1 0

php+js实现极验，拖动滑块验证码验证表单等

文章来自公众号：PHP自学中心, 链接：http://blog.startphp.cn 作者：磊丰 **转载文章请注明出处应用场景现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录...，这种方式比传统的验证码方式有更好的体验，减少用户输入的错误，也同样能起到防盗刷的功能。...极验拖动验证实现演示：http://blog.startphp.cn/jiyan/ 极验拖动动画图 [jiyan.gif] 代码文件截图 [QQ截图20190715103107.jpg] 代码实现 html...content="ie=edge"> 极验滑块拖动验证码...0-100 }else{ $type = 'png'; $quality = 7;//图片质量 0-9 }

4.1K3 0

Python爬虫之极验滑动验证码的识别

近几年出现了一些新型验证码，其中比较有代表性的就是极验验证码，它需要拖动拼合滑块才可以完成验证，相对图形验证码来说识别难度上升了几个等级。本节将讲解极验验证码的识别过程。 1....本节目标我们的目标是用程序来识别并通过极验验证码的验证，包括分析识别思路、识别缺口位置、生成滑块拖动路径、模拟实现滑块拼合通过验证等步骤。 2....了解极验验证码极验验证码它是一个专注于提供验证安全的系统，主要验证方式是拖动滑块拼合图像。若图像完全拼合，则验证成功，即表单成功提交，否则需要重新验证。...极验验证码的特点极验验证码相较于图形验证码来说识别难度更大。对于极验验证码 3.0 版本，我们首先点击按钮进行智能验证。如果验证不通过，则会弹出滑动验证的窗口，拖动滑块拼合图像进行验证。...一般来说，如果是同一个会话，一段时间内第二次点击会直接通过验证。如果智能识别不通过，则会弹出滑动验证窗口，我们要拖动滑块拼合图像完成二步验证。拖动示例验证成功后，验证按钮变成如图的状态。

7961 0

Python之极验滑动验证码的识别（教程+案例）

1 滑动验证码的识别介绍本节目标：用程序识别极验滑动验证码的验证，包括分析识别思路、识别缺口位置、生成滑块拖动路径、模拟实现滑块拼合通过验证等步骤。...了解极验滑动验证码：极验滑动验证码官网为：http://www.geetest.com/ 验证方式为拖动滑块拼合图像，若图像完全拼合，则验证成功，否则需要重新验证，如图所示： image.png 接下来我们链接地址...#... ③ 获取并储存有无缺口的两张图片首先获取无缺口的验证图片，并保存到本地获取滑块对象，并执行点击，让浏览器中显示有缺口图片获取有缺口的验证图片，并保存到本地 def...def move_to_gap(self, slider, track): ''' 拖动滑块到缺口处 :param slider: 滑块...# 拖动滑块 self.move_to_gap(slider, track) success = self.wait.until(

3.3K4 1

极验验证码识别

极验验证码官网为：https://auth.geetest.com/login/。它是一个专注于提供验证安全的系统，主要验证方式是拖动滑块拼合图像。...若图像完全拼合，则验证成功，即表单成功提交，否则需要重新验证，如图所示： 1.先明确识别步骤：首先，模拟点击验证按钮，然后识别活动缺口的位置，最后，模拟拖动滑块。...实现一个边缘检测算法来找出缺口的位置，而对于这种极验验证码，我们可以利用和原图对比检测的方式来识别缺口的位置，因为在没有滑动滑块之前，缺口并没有呈现。我们可以同时获取两张图片。...：首先点击按钮进行智能验证，如果验证不通过，则会弹出滑动验证的窗口，拖动滑块拼合图像进行验证，之后生成三个加密参数，通过表单提交到后台，后台还会进行一次验证。...识别验证需要三步： 1.模拟点击验证按钮 2.识别滑动缺口的位置 3.模拟拖动滑块 ''' EMAIL = 'test@test.com' PASSWORD = '' BORDER = 6 INIT_LEFT

1.9K2 0

新版滑动验证码

今天的主角是滑动验证码，现在有很多网站使用了极验验证码来智能反爬虫,其中有一种是滑动验证码，具体来说就是拖动滑块来拼合图像，若图像完全拼合，则验证成功。...将任务拆分有助于我们解决问题，解决这个滑动验证码我们可以分为这么两个步骤： 1）识别图片缺口 2）模拟拖动滑块那么就一步一步来吧~ 图片缺口识别可以看到的是缺口图的颜色与周围有显著不同，我们只需要拿到不含缺口的原图进行对比就能够找到这个缺口的坐标...知道如何获得这两张图片之后，我们可以通过get_geetest_image函数来获取滑动验证码的图片，具体是用了 Selenium 工具选取图片元素，然后得到其所在位置以及大小，随后获取整个网页的截图，...def get_geetest_image(self,name,flag): """ 获得验证码图片 """...模拟拖动滑块要拖动滑块我们需要先得到滑块，通过简单的selenium操作即可。

4.7K3 1

实战 | 手把手教你用Python+OpenCV实现滑块验证码->自动拖动验证

导读本文主要介绍如何使用Python+OpenCV实现滑块验证码->自动拖动验证。...背景介绍前几天在某网站下载代码时，跳转到滑块验证码界面，需要验证OK后才能下载，貌似这种验证方式现在很流行，所以打算用OpenCV尝试如何让其自动拖动验证。...效果展示核心步骤是提取滑动块目标位置，如下是效果展示：目标滑动块定位步骤与演示：实现步骤: 【1】截取验证图片，颜色通道转换为HSV，取V通道分析原图： V通道效果： B,G,R=...morphologyEx(thres, cv2.MORPH_CLOSE, k2)#闭运算 cv2.imshow('MORPH_CLOSE', thres) 【3】轮廓提取 + 宽高/面积比筛选其他图片测试效果...(稳定性验证)：自动验证完整步骤实现步骤: 【1】通过模板匹配定位箭头位置，作为鼠标滑动起点；【2】定位模板滑动块位置；【3】控制鼠标拖动，直到与目标滑动块完全重合；这里提供两种思路

3.5K3 0

《最新出炉》系列初窥篇-Python+Playwright自动化测试-20-处理鼠标拖拽-下篇

1.简介上一篇中，宏哥说的宏哥在最后提到网站的反爬虫机制，那么宏哥在自己本地做一个网页，没有那个反爬虫的机制，谷歌浏览器是不是就可以验证成功了，宏哥就想验证一下自己想法，其次有人私信宏哥说是有那种类似拼图的验证码如何处理...2.滑动验证码2.1演示模拟验证码点击拖动场景例如:演示模拟验证码点击拖动场景示例如下:图片图片图片3.代码准备3.1前端HTML代码前端HTML代码如下：北京-宏哥滑动条 jquery...-1.7.1.min.js下载地址 jquery-1.7.1.min.js下载链接：http://www.jqueryfuns.com/resource/21694.自动化代码实现4.1代码设计图片4.2...("C:/Users/DELL/Desktop/test/MouseDrag/identifying_code.html") page.wait_for_timeout(2000) #获取拖动按钮位置并拖动

10.5K2 1

废柴，模拟登陆，代码控制滑动验证真的很难吗？Are you kidding？？？

通过对比两张图片可以发现，两张图片有两处明显不同的地方：一个是待拼合的滑块，一个是缺口。滑块的位置会出现在左边位置，缺口会出现在与滑块同一水平线的位置，所以缺口一般会在滑块的右侧。...，即点击按钮进行验证 :return: 按钮对象 """ button = self.wait.until(EC.element_to_be_clickable...track.append(round(move)) return track def move_to_gap(self, slider, track): """ 拖动滑块到缺口处...= self.get_slider() # slider.click() # 现在不需要点击滑块即可呼出缺口图片 # 获取带缺口的验证码图片 image2...BORDER # 获取移动轨迹 track = self.get_track(gap) print('滑动轨迹', track) # 拖动滑块

1.6K7 1

《手把手教你》系列技巧篇（三十一）-java+ selenium自动化测试- Actions的相关操作-番外篇（详解教程）

1.简介　　上一篇中，宏哥说的宏哥在最后提到网站的反爬虫机制，那么宏哥在自己本地做一个网页，没有那个反爬虫的机制，谷歌浏览器是不是就可以验证成功了，宏哥就想验证一下自己想法，于是写了这一篇文章，另外也是相对前边做一个简单的总结分享给小伙伴们或者童鞋们...6. release() 释放鼠标 7. perform() 执行所有Action中的存储行为 2.2演示模拟验证码点击拖动场景例如:演示模拟验证码点击拖动场景示例如下: 3.代码准备 3.1...="UTF-8"> 北京-宏哥滑动条 jquery...-1.7.1.min.js下载地址 jquery-1.7.1.min.js下载链接：http://www.jqueryfuns.com/resource/2169 4.自动化代码实现 4.1代码设计...1.运行代码，右键Run AS->Junit Test，控制台输出，如下图所示： 2.运行代码后电脑端的浏览器的动作，如下小视频所示： 5.小结宏哥这里用了单元测试的方法，当然你也可以用之前的方法进行测试

1.1K4 0

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-22- 操作鼠标拖拽 - 下篇（详细教程）

1.简介上一篇中，宏哥说的宏哥在最后提到网站的反爬虫机制，那么宏哥在自己本地做一个网页，没有那个反爬虫的机制，谷歌浏览器是不是就可以验证成功了，宏哥就想验证一下自己想法，其次有人私信宏哥说是有那种类似拼图的验证码如何处理...2.滑动验证码2.1演示模拟验证码点击拖动场景例如:演示模拟验证码点击拖动场景示例如下:3.代码准备3.1前端HTML代码前端HTML代码如下：北京-宏哥滑动条 jquery...Desktop\\test\\MouseDrag\\identifying_code.html"); //4.开始拖拽 //*[@id='drag']/div[3] //获取拖动按钮位置并拖动...page.navigate("https://www.jq22.com/demo/slideVerify201909022305/"); //4.开始拖拽 //获取拖动按钮位置并拖动

1142 1

200 行代码实现一个滑动验证码

意思就是说表单提交之后，会有请求发送到服务器，这个请求中包含了很多数据，比如用户名、密码，如果对接了验证码的话，还会有额外的验证码的值，或者更复杂的加密后的 Token 值，服务器会对发过来的信息进行校验...验证码的一个功能就是来规避机器的自动操作，所以我们需要通过轨迹来判断这个拖动过程是真实的人还是机器，因此我们需要记录拖动的路径，路径经过计算之后可以发送到后端进行进一步的分类，比如对接深度学习模型来分类拖动轨迹是否是人...拖动验证码示例可以看到图中有一个初始滑块，有一个目标滑块，如果把初始滑块拖动到目标滑块上才能校验成功，然后下方再打印拖动的轨迹，包含它的 x、y 坐标。...接下来就是一些样式上的问题了，对于图片的呈现，这里直接使用 CSS 的 background-image 样式来设置的，如果想显示图片的某一个范围，那就用 background-position 来设置...拖动验证码示例可以看到我们首先拖动了 Drag 滑块，当 Drag 滑块拖动到 Drop 滑块上时，出现了白色描边，证明已经拖动到目标位置了。

1.2K8 0

200 行代码实现一个滑动验证码

意思就是说表单提交之后，会有请求发送到服务器，这个请求中包含了很多数据，比如用户名、密码，如果对接了验证码的话，还会有额外的验证码的值，或者更复杂的加密后的 Token 值，服务器会对发过来的信息进行校验...验证码的一个功能就是来规避机器的自动操作，所以我们需要通过轨迹来判断这个拖动过程是真实的人还是机器，因此我们需要记录拖动的路径，路径经过计算之后可以发送到后端进行进一步的分类，比如对接深度学习模型来分类拖动轨迹是否是人...拖动验证码示例可以看到图中有一个初始滑块，有一个目标滑块，如果把初始滑块拖动到目标滑块上才能校验成功，然后下方再打印拖动的轨迹，包含它的 x、y 坐标。...接下来就是一些样式上的问题了，对于图片的呈现，这里直接使用 CSS 的 background-image 样式来设置的，如果想显示图片的某一个范围，那就用 background-position 来设置...拖动验证码示例可以看到我们首先拖动了 Drag 滑块，当 Drag 滑块拖动到 Drop 滑块上时，出现了白色描边，证明已经拖动到目标位置了。

1.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭