网页图片滑动验证

最新推荐文章于 2023-01-28 15:31:02 发布

平凡而又伟大

最新推荐文章于 2023-01-28 15:31:02 发布

阅读量465

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_40410916/article/details/117327465

版权

本文探讨了网页中常见的图片滑动验证机制，详细解释了其工作原理，包括图像拼接、用户交互处理和后台验证过程。通过这种方式，网站能够有效防止机器人和自动化工具的恶意操作，同时为用户提供了一种相对友好的验证体验。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滑动验证</title>
		<style>
			* {
     
				margin: 0;
				padding: 0;
			}

			body {
     
				background-color: #E8E8E8;
			}

			.container {
     
				overflow: hidden;
				margin: 50px auto;
				width: 310px;
				box-shadow: 10px 10px 5px #888888;
				border: 1px solid powderblue;
				border-radius: 0.3125rem;
				position: relative;
			}

			#canvas {
     
				background: indianred;
			}

			#block {
     
				position: absolute;
				left: 0px;
			}

			.refreshIcon {
     
				position: absolute;
				left: 280px;
				top: 5px;
				width: 21px;
				height: 20px;
				cursor: pointer;
				background: url(./refresh.png);
				display: block;
			}

			.verSliderBlock {
     
				height: 40px;
				width: 40px;
				background-color: #00ff7f;
				background: url('./right_arrow.png');
				background-size: 100%;
				box-shadow: 0 0 3px rgba(0, 0, 0, .3);
				cursor: pointer;
				position: absolute;
				text-align: center;
				line-height: 40px;
				color: #45494c;
				font-size: 25px;
				font-weight: 400;

			}

			.bar {
     
				position: relative;
				text-align: center;
				width: 310px;
				height: 40px;
				line-height: 40px;
				margin-top: 15px;
				background: #f7f9fa;
				color: #45494c;
				border: 1px solid #e4e7eb;
				display: block;
			}

			#bar-mask {
     
				position: absolute;
				left: 0;
				top: 0;
				height: 40px;
				border: 0 solid #1991fa;
				background: #d1e9fe;
			}
		</style>
	</head>
	<body>