页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular VUE

jQuery滑动解锁插件Unlock

表单 HTML我帮您 1月前  次浏览
unlock.js 是一款 jQuery 滑动解锁插件。目前很多网站在用户登录和注册时,为防止恶意攻击,采用来滑动解锁的验证方式。用户需要滑动指定的滑块到指定位置,才能通过验证。unlock.js 可以实现这种滑动解锁功能。它的特点还有:

尺寸、颜色、字体大小等都可以个性化定制

完成解锁后会有回调函数,用来触发进一步的数据处理

jQuery 滑动解锁插件
功能

    滑动解锁插
    尺寸、颜色、字体大小等都可以个性化定制
    完成解锁后会有回调函数,用来触发进一步的数据处理

使用方法

    引入插件文件
    <script src='unlock.js'></script>
    <link rel="stylesheet" type="text/css" href="unlock.css">
    创建一个div,作为容器,比如
    <div id = 'foo'></div>
    在脚本中初始化
    var $container = $('#foo');
    $container.slideToUnlock(options); 

其中options为可选参数,有默认值 options参数列表

参数列表

name describe default
width width of the slider width of container element
height height of the slider height of container element
bgColor background color #E8E8E8
progressColor color of the progress bar #FFE97F
handleColor color of the handler #fff
succColor background color when successfully unlocked #78D02E
text text on the progress bar 'slide to unlock'
textColor color of text #000
succText text on the progress bar when successfully unlocked 'ok!'
succTextColor color of succText #000
succFunc callback function when success function() { alert('successfully unlock!'); }


相关链接

发表评论