移动端滑块验证

所属分类：输入-拖和放,验证

40203 353 查看评论 (15)

分享到微信朋友圈

查看演示立即下载

插件描述：原生js实现，无依赖

注：请在移动端查看，或者开启浏览器模拟查看效果

更新时间：2018/2/24 下午8:59:17

更新说明：修复事件

更新时间：2018/1/22 下午1:37:23

更新说明：修复宽高设置问题

使用方法

1.引入样式和脚本

<link rel="stylesheet" href="css/ft-slider.css" />
<script src="js/ft-slider.min.js" type="text/javascript" charset="utf-8"></script>

2.初始化插件

var slider = new FtSlider({
    id: "slider",
    callback: function(res) {
        // res返回验证结果
    }
});

配置参数

Option	Type	Default	Description
width	number	280	宽度
height	number	34	高度
textMsg	string	请按住滑块，拖动到最右边\|	提示文字
successMsg	string	验证成功	验证成功提示文字
callback	function	回调函数	参数是验证结果

方法

Method	Description	Example
restore	状态还原	slider.restore();

有道的banner轮播切换效果js实例

移动端红包掉落游戏(原创)

jQuery移动端手势滑动切换（原创）

仿探探应用首页，原生图片切换(个人原创)移动端

拖和放

31191 334

jQuery拖动图片排列插件

本插件是基于dragst.js，拖拽排列图片的顺序，使用方法简单，兼容各大浏览器

拖和放

26256 316

htmlt拖放

html5拖放排序

拖和放

29238 318

jquery拖拽插件

jquery拖拽排序插件,和别的拖拽插件不同这个一次只能拖动到临近的位置。

拖和放

39046 333

讨论这个项目（15）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

番茄你个西红柿 0

2021/7/13 15:42:02

最后一抹忧伤 0

2019/11/20 15:32:20

fudue 0

2019/8/27 19:29:14

丶IF YOU 0

2018/7/5 12:56:54

hellolxc0

2018/7/5 16:35:27

http://www.jq22.com/jquery-info14819

pkmiss 0

2018/5/9 18:38:57

平生心愿 0

2018/4/16 14:28:49

- Xiong 0

2018/2/24 14:27:57

hellolxc0

2018/2/25 9:14:46

久念┾ 0

2018/2/7 9:53:43

vhvcb 0

2018/1/29 12:19:07

不明觉厉 0

2018/1/22 13:30:03

问题已经解决，谢谢楼主分享

我的微博201760

2018/4/13 15:19:59

请问移动端宽度适配你是怎么解决的呀求分享

我的微博201760

2018/4/13 15:21:07

已解决

查看更多评论

😃

😀
😉
😥
😵
😫
😘
😡
👍
🌹
👏
🍺
🍉
🌙
⭐
💖
💔

😃

😀
😉
😥
😵
😫
😘
😡
👍
🌹
👏
🍺
🍉
🌙
⭐
💖
💔

取消回复