UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

canvas滑动验证插件jigsaw(原创)

所属分类：输入-验证

 52719  433  查看评论 (64)
分享到微信朋友圈
X
canvas滑动验证插件jigsaw(原创) ie兼容12
 查看演示  website  立即下载

更新时间：2020/6/1 下午2:32:10

更新说明： 优化样式，支持IE(ie10+)和移动端使用

使用方法：

1.引入jigsaw.min.js

2. 

 jigsaw.init({
  el: document.getElementById('container'),
  width: 310, // 可选, 默认310
  height: 155, // 可选, 默认155
  onSuccess: function () { ... },
  onFail: function () { ... },
  onRefresh: function () { ... }
})

项目地址：https://github.com/yeild/jigsaw ，任何使用问题和建议欢迎issue

使用方法：

引入jigsaw.js 和 jigsaw.css

<link rel="stylesheet" href="jigsaw.css">
<script src="jigsaw.js"></script>
jigsaw.init(element[, success][, fail])

jigsaw.init接收三个参数，第一个参数为页面容器元素， 第二和第三个参数分别为验证成功和失败的回调函数。

特性：

图片由 https://picsum.photos/ 随机产生，然后使用canvas裁剪生成。

未编译ES6语法，建议使用现代浏览器体验。

相关插件-验证
查看更多

jQuery滑动验证可重置

 登陆页面用到验证的一种方式，滑动验证。预防代码恶意破坏也可用于重置密码获取短信验证码等。只是纯前端校验，相比图片滑动验证还是稍显劣势。
  验证
 20129  239

jQuery拼图滑块验证

 仿B站登录拼图滑块验证,代码结构清晰注释全。
  验证
 48488  514

jQuery滑动拼图验证插件SliderImgPuzzle(原创)

 仿造网络上的类似的拼图控件，还有结合自己的项目封装的
  验证
 47032  368

输入框内容验证插件jquery.input.rule.js

 这是一个文本框内容限制的方法，可以把用户输入的信息进行分类，然后进行判断，如果不符合，则提示错误。
  验证
 35501  330

讨论这个项目（64）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    陌上花开 0
    2024/1/4 2:18:33
    逻辑单独放在js文件中怎么使用jigsaw呢 回复
    该账户已被注销 0
    2020/9/8 17:52:07
    老哥，你css文件没有提供吗 回复
    s 0
    2019/11/30 15:07:39
    你好，我想问一下为什么图片路径换成后台提供的图片接口地址就会报错呢 回复
    Seven 0
    2019/10/21 13:06:26
    为什么移动端无法使用呢 回复
    King. 0
    2019/9/16 15:47:30
    请问ie兼容怎么调试呢
        King.0
        2019/9/16 15:48:07
        是appendChild的原因吗
    回复
    W 0
    2019/4/4 15:05:46
    请问一下，我跟换了路径怎么图片出不来了。谢谢！
        W0
        2019/4/4 15:27:47
        其实是谷歌浏览器用不了，是怎么回事。我用火狐又能用
    回复
    零度ㄈ 0
    2019/1/30 11:22:08
    成功后再次点击还可以拖动 这个不对吧 已经成功了怎么还能拖动啊
        ?0rg0
        2019/3/6 13:54:02
        成功后就是页面跳转或者其它操作了，你不可能还让它停留在这个页面吧
    回复
    【Kiss~D】 0
    2019/1/4 20:36:32
    手机能不能滑动
        ?0rg0
        2019/1/7 11:04:05
        目前不兼容，除非你能自己改下JS
    回复
    （O╊O） 0
    2018/12/26 15:22:37
    这样才能兼容ie啊
        ?0rg0
        2019/1/7 11:04:37
        你网上搜索，引入IE的js
        崔小崔0
        2019/7/25 18:25:01
        请问怎么搜索兼容ie的js，怎么没找到
    回复
    ?Mint周(? ??_??)? 0
    2018/12/26 14:52:25
    能换成自己的图吗 ？？怎么换啊
        ?0rg0
        2018/12/28 11:14:40
        function getRandomImg() {
  return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 1084)
}

        把这里面的换成你的图片路径

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复