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

背景：登录部分以前用的是那种需要手动输入的验证码方式，现在好多同行都改成了滑块，或者图片滑块验证码的方式（咱们也需要与时俱进，不能落后与竞争对手哈）。对于触屏(也就是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样式文件，须引入 -->
		<link href="https://cdn.bootcss.com/font-awesome/5.11.1/css/all.css" rel="stylesheet">
		<link href="http://longbowenterprise.gitee.io/slidercaptcha/disk/slidercaptcha.css" rel="stylesheet" />
		<!-- 这里是自己写的一些自定义样式 -->
		<style type="text/css">
			.slidercaptchaMask { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5); }  .slidercaptchaMask-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  .slidercaptchaMask .slidercaptcha { width: 314px; height: 286px; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.125); background-color: #fff; }  .slidercaptchaMask .slidercaptcha .card-body { padding: 1rem; }  .slidercaptchaMask .slidercaptcha canvas:first-child { border-radius: 4px; border: 1px solid #e6e8eb; }  .slidercaptchaMask .slidercaptcha.card .card-header { background-image: none; background-color: rgba(0, 0, 0, 0.03); }  .slidercaptchaMask .refreshIcon { top: -54px; }  .slidercaptchaMask .card-header { background-image: none; background-color: rgba(0, 0, 0, 0.03); padding: .55rem 1.25rem; margin-bottom: 0; font-size: 0.9rem; }  .slidercaptchaMask .card-body { padding: 1rem; } /* 垂直水平居中 */  .rowAndColCenter { display: flex; display: -webkit-flex; display: -moz-flex; flex-direction: column; -webkit-flex-direction: column; -moz-flex-direction: column; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; align-items: center; -webkit-align-items: center; -moz-align-items: center; }  .myhidden { display: none!important; }
		</style>
	</head>

	<body>
		<!-- 滑块验证码 -->
		<div class="slidercaptchaMask">
			<div class="slidercaptchaMask-wrap rowAndColCenter">
				<div class="slidercaptcha">
					<div class="card-header">
						<span>请完成安全验证</span>
					</div>
					<div class="card-body">
						<div id="captcha"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 这是一个jq插件，依赖于jq，所以须引入jq -->
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
		<!-- slidercaptcha是插件的主要部分，通过mouse和touch事件来实现pc和H5端的滑块移动处理 -->
		<script src="http://longbowenterprise.gitee.io/slidercaptcha/disk/longbow.slidercaptcha.js" type="text/javascript" charset="utf-8"></script>
		<script>
			// 进行初始化，这里可以传入的参数还有很多，详细参数说明以及解析见官网
			// 官网地址：https://gitee.com/LongbowEnterprise/SliderCaptcha
			var $captcha = $('#captcha').sliderCaptcha({
				setSrc: function() {
					// 这里是传入图片地址的
					return '';
				},
				onSuccess: function() {
					// 这里是成功后的逻辑处理
					var handler = setTimeout(function() {
						window.clearTimeout(handler);
						$captcha.sliderCaptcha('reset');
					}, 500);
				}
			});
		</script>
	</body>

</html>

1.2 参数说明（官网：https://gitee.com/LongbowEnterprise/SliderCaptcha）

1.3 效果

2.如果只是针对pc端的话，这里有好多可以选择的方案，可以参考一下

2.1网址：http://sc.chinaz.com/tag_jiaoben/HuaKuai.html

2.2 效果（大概有几十页效果，有兴趣的话可以点击去学习一下）

3.说明

3.1 使用该插件时有三处需要替换：

3.1.1 setSrc 里的return 里的图片地址部分；

3.1.2 slidercaptcha.js 源码里的 localImages 里的return 里的图片部分；

3.1.3 slidercaptcha.js 源码里的 img.setSrc 里的 "if (!src || src === '') src = 'https://picsum.photos/' + that.options.width + '/' + that.options.height + '/?image=' + Math.round(Math.random() * 20);" 这里的图片部分（这是别人的网站资源，防止出现侵权行为，哈哈）。

3.2 可能在使用的时候也会碰到一些奇怪的问题，可以去点评区看看。例如：有一个小伙伴在小米手机就遇到了 “小米自带浏览器无法滑动，拖动页面造成返回了”，他也才用了取巧的办法，最终解决了他自己的需求（https://blog.csdn.net/qq_37028216/article/details/88310634），也可以参考一下思路吧（我没小米手机，没遇到，遇到再解决吧，反正问题最终会被解决，办法总比困难多撒。可以在知乎，百度，csdn...找找看看）

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

猜你喜欢