素材牛

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

 所属分类:网页特效-表单/验证,滑块和旋转,滚动/拖拽

 浏览:683次-  下载:15次-  评论:2次-  发布时间:2019-02-16
jQuery支持移动端的滑动块拼图验证插件兼容IE9
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述: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>

文件目录结构

  • image
    • ┝ a1.png
    • ┝ a2.png
    • ┝ a3.png
  • ┝ index.html
  • ┝ jquery.min.js
  • ┝ jq_slideImage.js

讨论这个素材(2)回答他人问题或分享使用心得会奖励牛币

mimitu
2019年02月17日

现在都是这样的验证了。

回复
tcdiju
2019年02月19日

都是这样

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:15
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证