登录图片滑动验证实现

场景

主要代码

<!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

登录图片滑动验证实现相关推荐

Java滑动验证_java图片滑动验证（登录验证）原理与实现方法详解
本文实例讲述了java图片滑动验证(登录验证)原理与实现方法.分享给大家供大家参考,具体如下: 这是我简单做出的效果图,处理300X150px的校验图,并把图片发到前端,用时50毫秒左右,速度还是非常 ...
vue实现图片滑动验证功能——功能实现
图片滑动验证,是目前比较常见的验证方式,主要目的是防止用户利用机器人自动注册.登录.灌水. 目前vue技术日趋成熟,已经有专门针对图片滑动验证功能的插件了.具体使用方式如下: 1.安装插件--npm ...
Vue实现图片滑动验证
Vue实现图片滑动验证使用vue完成使用vue完成实习一个星期小白对工作安排的图片滑动验证分享 1.安装依赖附上:https://www.npmjs.com/package/vue-monop ...
vue 登录模块滑动验证
vue 登录模块滑动验证借助阿里云云盾开发首先登陆账号开通验证码服务 https://yundun.console.aliyun.com/?spm=5176.2020520162.categori ...
基于Java实现图片滑动验证(包含前端代码)
前言 1.下面是一个效果展示: 2.先抱怨一下,在博客上面的抄袭真的非常严重,为了实现一个图片滑动验证,我搜索了挺久的资料,不过内容翻来覆去就是同样的内容,千篇一律,作者还各不相同:内容相同我就不多说 ...
php 图片滑动验证貳
tp6方式: 注意:验证后销毁保存的图片(背景图和滑动图) <?php declare (strict_types = 1);namespace app\index\controller;use ...
安卓图片滑动验证模块
最近想把工作这两年的东西好好写一写,一直觉得自己好像没做什么东西一样,写一写也能给自己一点自信,当然更像是一次总结. 安卓滑动验证模块是去年一个需求做的,当时也只是从网上找了一个不错的博客 cv 大法 ...
python登录京东滑动验证_Python 实现自动登录+点击+滑动验证功能
需要用到的库有selenium,还需要安装Chrome浏览器驱动,具体如何安装我就不详述了在这里我模拟了csdn的登录过程 ** 1**.首先打开网页,用户名+密码登录,然后定位用户名输入框,和密码 ...
滑动验证+短信验证码接入=复制粘贴（Java）
PC版滑动验证的实现简介滑动验证是基于人机识别技术开发的智能验证码产品.用户通过简单的右滑交互,无需思考即可通过验证. 资源引入说明使用PC版滑动验证码,需要引入以下js资源,为保证服务功能最优 ...
前端滑动验证+拼图滑动验证效果
相信大家都玩过B站,B站在登陆的时候有个拼图滑动验证,今天就整合一下前端实现的滑动验证拖动滑动验证(无背景图片) <!DOCTYPE html> <html> <hea ...

登录图片滑动验证实现

登录图片滑动验证实现相关推荐

最新文章

热门文章