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

jQuery滑动拼图验证插件

所属分类：输入-验证

 37130  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拖拽拼图滑块验证
  验证
 21202  234

jQuery表单提交验证verify

 一整套注册验证，可直接用于实际项目中
  验证
 108712  1452

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

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

点击按钮获取验证码倒计时

 这是一个基于jQuery的点击按钮获取验证码倒计时插件，这个插件在我们的开发中非常常用
  验证
 48653  399

讨论这个项目（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即可。
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复