返回首页 设计案例 文章动态 组件列表
联系我们

扫一扫微信二维码

jQuery滑动拼图验证插件

新用户注册立送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>

   




如有侵权,请联系站主删除

项目讨论(0)

建站咨询

点我咨询

建站咨询热线

153-2135-3313

QQ,新浪是独立账号信息不互通

Q Q 登陆

我已阅读并接受 《注册声明》与《版权声明》

没有账号?立即注册

QQ,新浪是独立账号信息不互通

Q Q 注册

我已阅读并接受 《注册声明》与《版权声明》

已有账号?

注册声明

一、用户注册、登陆,视为接受本协议的约束。

二、用户承诺遵守国家的法律法规及部门规章

三、用户承诺遵守“313组件库”的知识产权政策.

四、站内插件用于行业交流、学习。

五、用户侵犯第三人的知识产权,由该用户承担全部法律责任。

版权声明

313组件库(www.yu313.cn)站内所有涉及插件及代码由会员或站主上传而来,313组件库不拥有会员上传的插件及代码的版权

313组件库作为网络服务提供者,对非法转载,盗版行为的发生不具备充分的监控能力。但是当版权拥有者提出侵权指控并出示充分的版权证明材料时,313组件库负有移除盗版和非法转载作品以及停止继续传播的义务。313组件库在满足前款条件下采取移除等相应措施后不为此向原发布人承担违约责任或其他法律责任,包括不承担因侵权指控不成立而给原发布人带来损害的赔偿责任。

如果版权拥有者发现自己作品被侵权,请及时向313组件库提出权利通知,并将姓名、电话、身份证明、权属证明、具体链接(URL)及详细侵权情况描述发往版权举报专用通道,313组件库在收到相关举报文件后,在3个工作日内移除相关涉嫌侵权的内容

QQ:515184405(周一到周五,9:30-18:00)

首页 案例 组件 我的