评论：jQuery滑动拼图验证插件  [查看原文]

所属分类：输入-验证

 38527  341  34
当前第1页 / 共1页
    koudiddy0
    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了。
    回复
    19921226330
    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 ;

        图片就对上了

    回复
    Spoondrift0
    2019/6/18 9:26:28
    换图片地址滑块就对不上了啊 回复
    十贰-Twelve0
    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即可。
    回复
    ~、唯爱~0
    2019/5/15 10:02:57
    demo外面加div 然后设置宽度 高度 居中 margin: 0 auto; 然后就会直接跑到右边，google浏览器
        Casey[??S??V??I??P??8]0
        2019/5/16 9:32:25
        [抱拳][抱拳][抱拳]
        已发现问题，正在提交审核中
    回复
    Fantasy0
    2019/5/8 19:12:35
    向右滑动 直接就过去右边
        贱民@0
        2019/5/12 22:52:10
        我也是这样
        Casey[??S??V??I??P??8]0
        2019/5/13 8:57:57
        pc 还是移动端，哪个浏览器，详细点让我复现一下，然后优化？直接去右边，猜测应该考虑跟赋值的宽度的因素
    回复
    1230
    2019/5/8 10:25:40
    监听的鼠标相对屏幕位置？滑动放在中间位置就偏了
        Casey[??S??V??I??P??8]0
        2019/5/8 16:39:39
        没有监听相对屏幕位置。
        滑动放在中间位置就偏了？ 是想要改滑块的初始位置吗？
    回复
    木木0
    2019/4/3 15:46:11
    有点小问题，直接双击也能生效，显示正确
        Casey[??S??V??I??P??8]0
        2019/4/4 9:24:04
        是不是验证完成之后再重置，点击滑块，还是验证完成的状态？
        我刚检查出了这个 问题，正提交审核中
    回复

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

取消回复