UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

移动端滑块验证

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

 40350  353  查看评论 (15)
分享到微信朋友圈
X
移动端滑块验证 ie兼容11
 查看演示  立即下载

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

更新时间：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返回验证结果
    }
});

 配置参数

OptionTypeDefaultDescription
widthnumber280宽度
heightnumber34高度
textMsgstring请按住滑块，拖动到最右边|提示文字
successMsgstring验证成功验证成功提示文字
callbackfunction回调函数参数是验证结果

 方法

MethodDescriptionExample
restore状态还原slider.restore();
相关插件-拖和放,验证
查看更多

jQuery多容器之间拖曳

 除了有一般拖曳的功能，还可以在不同容器之间拖曳。
  拖和放
 33462  424

jQuery拖拽拉伸缩放插件l_zoom

 简约版拖拽拉伸缩放原生jQuery插件 包含 自由缩放 和 等比例缩放 模式 经典还远网页文本框操作简单
  拖和放
 28793  328

jQuery九宫格拖拽效果

 九宫格拖拽效果简单上手附带代码注释详解
  拖和放
 29268  315

jQuery图片DIV指定范围内拖动加调整大小

 实现在指定大小DIV内拖动图片，以及调整图片大小
  拖和放
 46684  390

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

    番茄你个西红柿 0
    2021/7/13 15:42:02
    怎么在vue框架里面用
    回复
    最后一抹忧伤 0
    2019/11/20 15:32:20
    滑块滑动时如果在安卓手机上发现浏览器分页也跟着滑动怎么办 回复
    fudue 0
    2019/8/27 19:29:14
    丶IF YOU 0
    2018/7/5 12:56:54
    请问怎么用在pc端啊
        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
    您好，请问这个怎么在vue里面使用
    回复
    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
        已解决
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复