jQuery滑块验证插件(PC)

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

 46030  446  查看评论 (28)
分享到微信朋友圈
X
jQuery滑块验证插件(PC) ie兼容6

使用方法

1.引入样式和脚步

<link rel="stylesheet" href="css/jquery.slider.css" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.slider.min.js"></script>

2.初始化插件

$("#slider2").slider({
    width: 340, // width
    height: 40, // height
    sliderBg: "rgb(134, 134, 131)", // 滑块背景颜色
    color: "#fff", // 文字颜色
    fontSize: 14, // 文字大小
    bgColor: "#33CC00", // 背景颜色
    textMsg: "按住滑块,拖拽验证", // 提示文字
    successMsg: "验证通过了哦", // 验证成功提示文字
    successColor: "red", // 滑块验证成功提示文字颜色
    time: 400, // 返回时间
    callback: function(result) { // 回调函数,true(成功),false(失败)
        $("#result2").text(result);
    }
});
相关插件-拖和放,验证

jQuery拖拽拖放插件DAD

DAD 是一款基于 jQuery 的拖拽拖放插件,它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许禁止拖放等等,同时你也可以稍加改造,做成类似垃圾篓、购物车等效果。
  拖和放
 79453  651

jquery拖拽插件

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

jQuery双击拖拽图片

jQuery鼠标双击事件拖拽图片
  拖和放
 29939  298

jquery 拖动复制

jquery拖动div复制到表格
  拖和放
 45660  453

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

    samueltech 0
    2019/9/6 9:07:20
    这个不错,学习一下,但看起来比较简单,请问一下大神,能不能实现象V5验证码或极限那样的滑块拖动效果 ,如何保证安全(象极验和V5验证码一样) 回复
    0
    2019/8/26 14:15:20
    这个插件使用的html部分怎么写呢 回复
    TAG 0
    2018/12/13 17:04:57
    写得很不错,想用一下 回复
    不闻不问 0
    2018/11/26 10:58:35
    怎么支持手机滑动呢
        hellolxc1
        2018/11/26 11:51:52
        http://www.jq22.com/jquery-info17462
        不闻不问0
        2018/11/26 13:23:25
        谢谢
    回复
    后知后觉 0
    2018/11/12 15:05:48
    写的非常好,很适用
        自人海坠落0
        2022/3/4 15:30:24
        请问怎么使用呢
    回复
    王家佳 0
    2018/10/30 10:01:32
    可以跟后台交互吗
        Hey boy0
        2018/11/2 16:34:29
        一般这个不需要交互吧应该判断一下状态值吧
    回复
    起泡汽水 0
    2018/10/22 16:52:20
    hellobaby 0
    2018/7/2 17:15:36
    - Xiong 0
    2018/2/28 12:09:20
    有没有100%宽度的设置,能不能加一个这功能
    回复
    忽雷驳 0
    2018/1/15 9:53:37

    这插件样式看起来不错啊

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复