滑动验证

最新推荐文章于 2024-04-30 13:41:44 发布

风叶翩翩

最新推荐文章于 2024-04-30 13:41:44 发布

阅读量2.8k

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_45743799/article/details/103021871

版权

拖动滑块进行验证码的验证。

滑动验证有两种：

图片滑动验证
长方形的滑动条验证

一：图片滑动验证

效果演示

原始样式
在这里插入图片描述
没有正确验证的时候滑块会直接回到初始位置让你再次滑动验证

验证成功会给出提示
在这里插入图片描述
看代码之前**注意：**代码中要引入相应架包

<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/verify.js" ></script>

代码演示

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/verify.js" ></script>
</head>

<style>
	/*滑动验证码*/
	.verify-bar-area {
   
	    position: relative;
	    background: #FFFFFF;
	   	text-align: center;
	    -webkit-box-sizing: content-box;
	    -moz-box-sizing: content-box;
	    box-sizing: content-box;
	   	border: 1px solid #ddd;
	   	-webkit-border-radius: 4px;
	}
	 
	.verify-bar-area .verify-move-block {
   
	    position: absolute;
	    top: 0px;
	    left: 0;
	    background: #fff;
	    cursor: pointer;
	    -webkit-box-sizing: content-box;
	    -moz-box-sizing: content-box

最低0.47元/天解锁文章

风叶翩翩

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
滑动验证

拖动滑块进行验证码的验证。滑动验证有两种：图片滑动验证长方形的滑动条验证一：图片滑动验证效果演示原始样式没有正确验证的时候滑块会直接回到初始位置让你再次滑动验证验证成功会给出提示看代码之前**注意：**代码中要引入相应架包<script type="text/javascript" src="js/jquery.min.js"></script&g...
复制链接

扫一扫