滑块验证码，图片滑块验证码（兼容pc和H5）

最新推荐文章于 2024-07-26 20:16:38 发布

hangGe0111

最新推荐文章于 2024-07-26 20:16:38 发布

阅读量4.8k

点赞数

分类专栏： Web 文章标签：滑块验证码图片滑块验证码

本文链接：https://blog.csdn.net/hangGe0111/article/details/103371977

版权

这篇博客介绍了滑块验证码的流行趋势，提供了一款兼容PC和H5的图片滑块验证码实现方案，详细解释了其实现原理，并给出了具体的代码实现和参数说明。此外，还分享了针对PC端的其他滑块验证码选项，并提醒在使用过程中需要注意的图片替换和可能出现的问题解决方法。

摘要由CSDN通过智能技术生成

背景：登录部分以前用的是那种需要手动输入的验证码方式，现在好多同行都改成了滑块，或者图片滑块验证码的方式（咱们也需要与时俱进，不能落后与竞争对手哈）。对于触屏(也就是H5页面)的网站，可以在pc端打开，然后再在控制台切换为手机模式，所以这个效果需要兼容pc和触屏两端。原理比较简单，pc无非通过鼠标的mouse事件，触屏通过手指的touch事件，然后就是随机截取图片的一个小块，通过拖拽，对比拖拽小块和缺口的位置偏差来实现。从网上找了个比较靠谱的，写的不错，可以直接使用。

1.实现

1.1html （官网：https://gitee.com/LongbowEnterprise/SliderCaptcha）

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>滑块</title>
		<!-- 1.font-awesome属于字体文件，这里需要引入的；2.slidercaptcha是插件的css样式文件，须引入 --&