素材牛VIP会员

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

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

 浏览:1010次-  下载:16次-  评论:2次-  更新时间:2019-02-16
jQuery支持移动端的滑动块拼图验证插件兼容IE9
积分说明:注册即送15牛币,每日签到可获得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>

文件目录结构

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

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

mi***tu  
2019年02月17日

现在都是这样的验证了。

回复
tc***ju  
2019年02月19日

都是这样

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

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)