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

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

40651 389 查看评论 (40)

分享到微信朋友圈

查看演示立即下载

插件描述：拖动滑块验证，之前有网友发布的不兼容手机

使用方法

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>

tooltipster实用的工具提示插件

jQuery移动端购物车计算物品

基于ajax的登录效果

这是一个机遇ajax的登录效果，登陆过程无跳转。

验证

52076 426

原生js验证码

原生js验证码彩色点线干扰

验证

24521 289

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

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

验证

34675 330

修改绑定手机号Tab切换样式时间线样式

时间线形式切换修改绑定手机号，第一步第二步第三步

验证

32823 437

讨论这个项目（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();
        }
    });
};