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

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

所属分类：输入-验证

 51081  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表单验证插件

 这是一款简单易懂的表单验证插件，没用使用任何多余的代码，使用时仅需引用jquery和jquery.validate.js
  验证
 32717  336

原生js验证码

 原生js验证码彩色点线干扰
  验证
 24400  289

jQuery注册表单验证

 jQuery常见注册表单 包括表单验证、生日选择、邮箱自动补全、密码可见性与重复密码的验证等
  验证
 63552  576

jQuery随机验证码

 19，AZ随机生成验证码，且颜色及形状随机改变
  验证
 32087  321

讨论这个项目（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)
}

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

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