313组件库 - jQuery滑动拼图验证插件

jQuery滑动拼图验证插件

发布日期：2019-07-03 09:07:00 浏览次数：880 下载量：0

查看演示立即下载

新用户注册立送5积分哦...

插件描述：滑动验证，拼图验证,拖拽验证,jquery插件

组件介绍:

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

使用

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>