jQuery支持移动端的滑动块拼图验证插件

所属分类：网页特效-表单特效,滑块/旋转/滚动,触屏/拖拽/下拉

浏览：4315次评论：2次更新时间：2019-02-16

牛币素材VIP可免积分下载

查看演示立即下载收藏

jQuery支持移动端的滑动块拼图验证插件

查看演示立即下载

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

素材描述：jQuery滑动拼图验证插件，支持移动、PC

标签：滑动拼图拼图验证滑动验证

详细介绍

注：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>