jQuery滑动拼图验证插件

所属分类:输入-验证

 38420  341  查看评论 (34)
分享到微信朋友圈
X
jQuery滑动拼图验证插件 ie兼容9

更新时间:2019/10/18 下午3:10:41

更新说明:没设高度的时,剪切图不一致,已优化


更新时间:2019/8/14 上午8:52:57

更新说明:滑动成功一次之后,调用resetSlide(),重置滑块,刷新按钮没有重置,已修改


更新时间:2019/5/16 上午9:25:06

更新说明:修改了bug,dom不在最左侧的时候,滑块的位移计算有个问题,会滑到最右边,现已修改。


更新时间:2019/4/4 上午9:15:36

更新说明:验证完成后,点击重置状态,没有清除之前滑动距离,导致点击滑块还是验证完成状态,现已修改;


注:chrome本地预览有错位问题需要在服务端演示正常,本地预览请用火狐浏览器。

 jq_slideImage

使用

var mySlideImage = new SlideImageVerify('#slideImageWrap', {
    slideImage: ['image/0034034888570098_b.jpg', 'image/1155116361608498_b.jpg', 'image/b6d5128741fee79a077f9e72a36797cc.jpg'],
    slideAreaNum: 1,
    refreshSlide: true,
    getSuccessState: function(res) {
        console.log(res);
    }
})

参数

  • slideImage :图片的src,可以为一个图片的src,也可以是多张图片的 src 数组 

  • slideAreaNum:误差范围 +- 5   默认5   number

  • refreshSlide:是否需要刷新按钮 默认true  Booleans

  • getSuccessState:成功回调  返回true   Function

  • initText:初始展示的提示文字 默认“向右滑动完成拼图” str

重置方法

resetSlide()
//mySlideImage.resetSlide();

调整尺寸

resizeSlide()
//mySlideImage.resizeSlide();
window.onresize = function () {
           mySlideImage.resizeSlide();
}

有个问题是  会闪烁 ,暂时没处理好,一般正常用的话,不会用到需要实时根据屏幕调整尺寸的

注:需要给初始dom设置宽高或百分百,(不设的话,会默认宽300 高190(减去滑动条的高度,图片有150高)),样式需要自己覆盖修改,或者在源码里面搜索 修改

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
.demo1 {
    width: 100%;
    height: 300px;
}
.demo2 {
    width: 300px;
    height: 200px;
}
</style>
    </head>

    <body>
<div id="slideImageWrap"> </div>
<button id="reset-one"> 重置test1 </button>
<div id="slideImageWrap2"> </div>
<button id="reset-two"> 重置test2 </button>
</body>
</html>
相关插件-验证

简洁实用的jQuery表单验证

jQuery表单验证已经扩展
  验证
 33863  336

jQuery图片拼图验证(隔壁借鉴过来的)

稳定的jQuery拖拽滑动拼图验证
  验证
 21989  251

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

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

jquery注册验证

jquery动态注册验证
  验证
 54161  374

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

    koudiddy 0
    2019/11/8 18:29:14
    大神,切下来的图片加不上阴影 回复
    简暧 0
    2019/8/15 21:48:47
    大佬,当拼图成功后,如何取出成功后的状态呢?
        Casey[??S??V??I??P??8]1
        2019/8/16 9:00:35
        成功后 getSuccessState 这个方法会触发返回 true
        简暧0
        2019/8/16 10:05:52
        if (flag == true) {
            flag = false;
            layer.open({
                type: 1,
                closeBtn: 0,
                shadeClose: false, //点击遮罩关闭
                content: $("#slideImages"),
                success: function() { //弹出后的回调
                    alert("成功弹出");
                    $(".layui-layer-title").hide();
                    // '#slideImages'
                    var mySlideImage = new SlideImageVerify('#slideImages', {
                        initText: '请滑动拼图完成验证',
                        slideImage: ['static/images/slideImages/a1.jpg', 'static/images/slideImages/a2.jpg', 'static/images/slideImages/a3.jpg'],
                        slideAreaNum: 10,
                        refreshSlide: true,
                        getSuccessState: function(res) {
                            flag = res;
                            alert("flag1" + flag);
                            console.log(res);
                        }
                    });
                    mySlideImage.getSuccessState()
                }
            });
            alert("flag2" + flag);
        }

        这段代码,我是想通过layui的弹出层插件完成拼图验证,运行的结果是可以成功弹出并且有拼图验证,但是顺序不对(测试的时候我加了几个弹框提醒),实际的顺序是:“成功弹出”->"flag2false"->当拼图完成弹出“flag1true”但是我的表单就没法提交了(flag最后的状态应该是true,才能提交),本人是以后主要从事后端的“码农”,所以对前端不是很了解,这个问题就困扰了很久(我感觉是拼图成功后这个状态我没有取出来),盼望大佬回复指教,感谢!

        Casey[??S??V??I??P??8]1
        2019/8/16 10:47:22
        1.弹出弹框以后, flag2 打印肯定为 false ;,因为赋值 是在 滑动成功 动作 以后才赋;还没滑动,去哪赋true;
        2. mySlideImage.getSuccessState()不需要手动调用;成功以后自动调用。
        3. 1)提交方法 可以放在 getSuccessState 里面。验证成功以后自动触发提交。
        2)如果验证成功以后,还有单独的提交按钮,验证成功以后,点提交再判断 flag;
        简暧0
        2019/8/16 11:29:33
        问题已解决,感谢大佬!
    回复
    绿茶依雪 0
    2019/8/13 15:21:35
    大神:只要滑动成功一次之后,调用resetSlide(),重置滑块,但是刷新按钮还是不出来,这个问题要不要修复下?
    使用场景是:登录时候账号密码输入错误了,肯定要重置滑块,让用户重新验证,还是需要有刷新按钮的。
        Casey[??S??V??I??P??8]1
        2019/8/14 8:58:35
        修复了,已在审核中,我先告你本地改的方法:插件js里 大概337行 resetSlide 方法里 追加一个 _this.$slideRefBtn.show()
        绿茶依雪0
        2019/8/16 14:46:32
        六六六
    回复
    ?念?的美 0
    2019/7/4 14:31:43
    google浏览器打开demo,滑块直接就在缺省图的位置没有在最左边,这个要如何解决
        Casey[??S??V??I??P??8]1
        2019/7/11 9:10:11
        跟其它几个问题原因都差不多,canvas的getImageData()访问图片有跨域问题。可以图片放服务器,或者用firefox浏览器试试,hbuilder等内置web服务打开应该也行。
        liz0
        2019/9/20 15:20:35
        可能是引入的js库的跨域问题,我改成服务器上的jquery库,就默认在左边,ok了。
    回复
    1992122633 0
    2019/6/27 14:39:13
    滑块是对上了,但是图案没有对上,看demo也是这样
        liz0
        2019/9/20 15:22:43
        同问,图片对不上怎么修改尼。看起来是图片适应后变形引起的。
        liz1
        2019/9/20 17:15:12

        将js中 :

        this.$eleHeight = (this.$ele.height() - 40) || (190 - 40);

        改为

        this.$eleHeight = this.$ele.height() || 190 ;

        图片就对上了

    回复
    Spoondrift 0
    2019/6/18 9:26:28
    换图片地址滑块就对不上了啊 回复
    十贰-Twelve 0
    2019/6/17 11:08:47
    这个怎么整合到vue里面呢,我用了,报jq_slideImage.js中$ 不存在,
        Casey[??S??V??I??P??8]1
        2019/7/11 9:01:03
        那应该是你jq没引对,单独打印下 $ ,如果没有,那就检查引入方法。
        vue 也可以用jq插件,dom加载完以后再初始化插件。
        路尔轩0
        2019/7/11 14:54:06
        如果是只是为了用这个验证引入jqery的话就不太好了,jquery太重,可以找一个原生写的
        BattleofLexington1
        2019/8/15 23:35:45
        现在很多jquery cdn公共库,直接调用又快,所以不用单行大小问题。
    回复
    左心房的风景 0
    2019/6/3 9:49:30
    mac本自带的safari浏览器,刷新按钮点击之后,不出现图片
    回复
    封绝 0
    2019/6/2 22:46:52
    360浏览和谷歌浏览器预览的时候可以,下载来打开就不行,一开始就在图片的嵌合的位置。
        西瓜0
        2019/6/2 23:44:33
        注意看说明,本地预览用火狐。
    回复
    左心房的风景 0
    2019/5/24 18:39:26
    IE浏览器不显示图片,IE8以上也不行
        西瓜0
        2019/5/24 19:48:11
        这个问题是,IE本地预览有时候对Png-8格式不显示,只在本地预览会出现这个问题,如果需要本地测试可换成jpg或png-24即可。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复