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

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

所属分类：输入-验证

 52546  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随机验证码插件

 点击图片进行更换验证密码
  验证
 33399  356

jquery多功能表单验证2.0(原创)

 input输入框验证，多选，单选，下拉验证，可异步修改提示，表单异步提交
  验证
 17769  211

JQUERY form表单验证

 easy将是一个系列的库 目前只有一个文件easyform，包含3个类，easytip : tooltip控件，支持灵活的配置。easyinput ： 单个input验证控件easyform ：表单验证控件
  验证
 187101  654

Modern Fms 表单验证插件

 Modern Fms(精美的纯css3 html5表单框架) 表单验证插件
  验证
 14324  181

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

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

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