jquery拖动滑块验证,兼容各个浏览器

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

 40801  389  查看评论 (40)
分享到微信朋友圈
X
jquery拖动滑块验证,兼容各个浏览器 ie兼容6

使用方法

1. CSS引入 slide-unlock.css

2. JS引入  jquery-1.10.2.js 和 jquery.slideunlock.js

<script>
    $(function () {
        var slider = new SliderUnlock("#slider",{
				successLabelTip : "验证成功"	
			},function(){
				alert("验证成功,即将跳转至百度");
            	window.location.href="http://www.baidu.com"
        	});
        slider.init();
    })
</script>
相关插件-验证,拖和放

输入框内容验证插件jquery.input.rule.js

这是一个文本框内容限制的方法,可以把用户输入的信息进行分类,然后进行判断,如果不符合,则提示错误。
  验证
 34773  330

jQuery图片滑块验证(附注释)

jQuery拖拽拼图滑块验证
  验证
 21434  234

canvas随机生成图片验证码

html5 canvas随机生成图片验证码,代码注释全,使用方便。
  验证
 35514  353

超炫的登录页面 login register

超炫的登录页面和注册页面 login register
  验证
 84857  429

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

    764 0
    2023/3/30 16:16:47
    āìō 0
    2022/5/24 12:46:58
    我想去浪 0
    2021/10/18 11:25:38
    体验不是很好,不小心移出了验证框外,就会跳回原点,客户还以为你的功能不行
        我想去浪3
        2021/10/18 17:05:23

        我自己调整了一下,把SliderUnlock.prototype.init这个方法改了如下:

        SliderUnlock.prototype.init = function() {
            var me = this;
            me.updateView();
            var btn = $('#label')[0];
            var btnWidth = btn.offsetWidth;
        
            btn.ondragstart = function() {
                alert("ondragstart");
                return false;
            };
            btn.onselectstart = function() {
                alert("onselectstart");
                return false;
            };
            //pc端
            btn.onmousedown = function(e) {
                var disX = e.clientX - btn.offsetLeft;
                var e = e || window.event;
                me.lableIndex = e.clientX - btn.offsetLeft;
                me.handerIn();
                document.onmousemove = function(event) {
                    me.handerMove(event);
                };
                document.onmouseup = function(event) {
                    if (!me.isOk) {
                        me.handerOut();
                    }
                };
                document.mouseout = function(event) {
                    me.handerOut();
                };
            };
        
            //移动端
            var cont = $("#label");
            cont.on({ //绑定事件
                touchstart: function(event) {
                    var e = event || window.event;
                    me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;
                    me.handerIn();
                },
                touchmove: function(event) {
                    me.handerMove(event, "mobile");
                },
                touchend: function(event) {
                    me.handerOut();
                }
            });
        };
    回复
    korb 0
    2019/8/30 10:08:52
    没法用? 我无法拖动这个按钮呀 回复
    nature 0
    2019/5/18 18:20:30
    不错,很好用。 回复
    小小苦瓜 0
    2019/4/17 6:00:43
    Awesome洁盈 0
    2019/3/29 14:18:23
    默小兮O(∩_∩)O~ 0
    2019/1/15 9:33:17
    ie浏览器没有呢兼容啊+ 回复
    A-Margin 0
    2018/9/4 18:48:33
    请问这个滑块一旦拖快了,就会回到原点,如何去掉这个速度限制呢,具体代码写在了哪里啊。
        阴霾的记忆0
        2018/9/11 9:53:05
        改为绑定 document.onmousemove 就可以了。
        lifuhai0
        2019/8/13 18:53:56
        改为绑定 document.onmousemove是什么意思啊,在哪里改呀
    回复
    吕欣琪 0
    2018/8/13 17:30:06
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复