手机HTML拼图验证,jQuery支持移动端的滑动块拼图验证插件

注：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高))，样式需要自己覆盖修改，或者在源码里面搜索 修改

html>

.demo1 {

width: 100%;

height: 300px;

}

.demo2 {

width: 300px;

height: 200px;

}

 重置test1 

 重置test2