支持移动端的滑块式验证码h5插件_h5滑块验证,h5滑动验证码资源-CSDN文库

共4个文件

js：2个

css：1个

html：1个

滑块验证码

需积分: 50 54 浏览量 2022-06-14 17:23:21 上传评论收藏 38KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

滑块验证码h5插件.zip （4个子文件）

滑块验证码h5插件

jquery.js 94KB

index.html 2KB

disk

longbow.js 12KB

style.css 2KB

<!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>支持移动端的滑块式验证码插件</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.2/css/all.css" rel="stylesheet"> <link href="./disk/style.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 { padding: 5px; background-image: none; background-color: rgba(0, 0, 0, 0.03); } .refreshIcon { top: -38px; font-size: 15px; } </style> </head> <body> <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> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="./disk/longbow.js"></script> <script> $('#captcha').sliderCaptcha( { repeatIcon: 'fa fa-redo', setSrc: function () { return ''; }, onSuccess: function () { alert('验证通过!'); } }); </script> </body> </html>