CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

使用滑动解锁插件 slideunlock.js 制作滑动解锁验证码

发布时间:『 2017-03-15 11:21』  博客类别:WEB前端  阅读(1920) 评论(0)

我之前在 业余草 写过关于 HTML5 滑动解锁验证码的文章。文章地址:《滑动验证码的实现原理》、《HTML5实现滑动验证码》。今天在使用 slideunlock.js 插件来为大家实现 滑动解锁验证码 的案例!

运行效果

slideunlock.js 插件 实现滑动验证码功能

slideunlock.js 插件地址

https://github.com/xmt1139057136/slideunlock.js

使用方法

<!DOCTYPE html>
<html>
<head>
<title>拖拽滑动验证码插件 slideunlock.js</title>
<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">
<link href="./slide-unlock.css" rel="stylesheet">
<style>
    html, body, h1 {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #393939;
        color: #d5d4ff;
        overflow: hidden
    }
    #demo {
        width: 600px;
        margin: 150px auto;
        padding: 10px;
        border: 1px dashed #d5d4ff;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        text-align: left;
    }
</style>
</head>
<body>
<div id="demo">
  <div id="slider">
    <div id="slider_bg"></div>
    <span id="label">>></span> <span id="labelTip">拖动滑块验证</span> </div>
  <script src="jquery-1.12.1.min.js"></script> 
  <script src="jquery.slideunlock.js"></script> 
  <script>
    $(function () {
        var slider = new SliderUnlock("#slider",{
successLabelTip : "欢迎访问业余草网站"
},function(){
alert("验证成功,即将跳转至业余草首页");
             //window.location.href="http://www.xttblog.com"
         });
        slider.init();
    })
</script> 
</div>
</body>
</html>

——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   HTML5     slideunlock.js     插件     jQuery     滑动验证码  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有