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

jQuery滑动拼图验证插件

所属分类：输入-验证

 38525  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>
相关插件-验证
查看更多

超炫的登录页面 login register

 超炫的登录页面和注册页面 login register
  验证
 85929  429

jQuery屏幕解锁插件patternLock.js

 屏幕解锁基于HTML，jQuery和CSS，模拟混合应用程序设计。
  验证
 21150  300

基于ajax的登录效果

 这是一个机遇ajax的登录效果，登陆过程无跳转。
  验证
 53101  426

Modern Fms 表单验证插件

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

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