登录图片滑动验证实现

最新推荐文章于 2022-11-07 09:48:02 发布

WCR_520

最新推荐文章于 2022-11-07 09:48:02 发布

阅读量1.6k

点赞数

分类专栏：该死的前端文章标签： js html 前端

本文链接：https://blog.csdn.net/FIQ_527/article/details/118312528

版权

该死的前端专栏收录该内容

30 篇文章 1 订阅

订阅专栏

场景
在这里插入图片描述
主要代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>支持移动端的jQuery滑块式验证码插件 </title>

<!--框架样式-->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!--图标样式-->
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" rel="stylesheet">

<!--主要样式-->
<link href="disk/slidercaptcha.css" rel="stylesheet" />

<style>
.slidercaptcha {
	margin: 0 auto;
	width: 314px;
	height: 286px;
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
	margin-top: 40px;
}

.slidercaptcha .card-body {
	padding: 1rem;
}

.slidercaptcha canvas:first-child {
	border-radius: 4px;
	border: 1px solid #e6e8eb;
}

.slidercaptcha.card .card-header {
	background-image: none;
	background-color: rgba(0, 0, 0, 0.03);
}

.refreshIcon {
	top: -54px;
}
</style>
	<style>
			*{ 
    margin:0;
    padding:0;
   }
         button, input{
    outline:none;
   }
   button, .login{
    width:120px; 
    height:42px; 
    background:#f40; 
    color:#fff; 
    border:none; 
    border-radius:6px;
    display: block;
    margin:20px auto; 
    cursor: pointer;
   }
   .popOutBg{
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    background:rgba(0,0,0,.6);
    display: none;
   }
   .popOut{
    position:fixed;
    width:600px; 
    height:400px;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-300px;
    background:#fff;
    border-radius:8px;
    overflow: hidden;
    display: none;
   }
   .popOut > span{
    position: absolute;
    right:10px;
    top:0; 
    height:42px;
    line-height:42px;
    color:#000;
    font-size:30px;
    cursor: pointer;
   }
   .popOut table{
    display: block;
    margin:42px auto 0;
    width:520px;
   }
   .popOut caption{
    width:520px;
    text-align: center;
    color:#f40;
    font-size:18px;
    line-height:42px;
   }
   .popOut table tr td{
    color:#666;
    padding:6px;
    font-size:14px;
   }
   .popOut table tr td:first-child{
    text-align: right;
   }
   .inp{
    width:280px;
    height:30px;
    line-height:30px;
    border:1px solid #999;
    padding:5px 10px;
    color:#000;
    font-size:14px;
    border-radius:6px;
   }
   .inp:focus{ 
    border-color:#f40;
   }
   @keyframes ani{
    from{
     transform:translateX(-100%) rotate(-60deg) scale(.5);
    }
    50%{
     transform:translateX(0) rotate(0) scale(1);
    }
    90%{
     transform:translateX(20px) rotate(0) scale(.8);
    }
    to{
     transform:translateX(0) rotate(0) scale(1);
    }
   }
   .ani{ animation:ani .5s ease-in-out;}
  </style>
</head>
<body>
	<button type="button">登录</button>
	<div class="popOutBg"></div>
	<div class="popOut">
		<span title="关闭"> x </span>
		<div class="container-fluid">
		    <div class="form-row">
		        <div class="col-12">
		            <div class="slidercaptcha card">
		                <div class="card-header">
		                    <span>请完成安全验证</span>
		                </div>
		                <div class="card-body"><div id="captcha"></div></div>
		            </div>
		        </div>
		    </div>
		</div>
	</div>
    

    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="disk/longbow.slidercaptcha.js"></script>
    <script>
        $('#captcha').sliderCaptcha({
            repeatIcon: 'fa fa-redo',
            setSrc: function () {
                //随机返回一张图片
			return 'https://picsum.photos/200/300';
            },
            onSuccess: function () {

                alert('验证通过!');
            }
        });
    </script>
	<script type="text/javascript">
		function $(param) {
			if (arguments[1] == true) {
				return document.querySelectorAll(param);
			} else {
				return document.querySelector(param);
			}
		}
	
		function ani() {
			$(".popOut").className = "popOut ani";
		}
		$("button").onclick = function() {
			$(".popOut").style.display = "block";
			ani();
			$(".popOutBg").style.display = "block";
		};
		$(".popOut > span").onclick = function() {
			$(".popOut").style.display = "none";
			$(".popOutBg").style.display = "none";
		};
		$(".popOutBg").onclick = function() {
			$(".popOut").style.display = "none";
			$(".popOutBg").style.display = "none";
		};
	</script>
</body>
</html>

完整代码下载地址
https://download.csdn.net/download/FIQ_527/19879088

WCR_520

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
登录图片滑动验证实现

场景主要代码<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>支
复制链接

扫一扫

专栏目录