滑动解锁,移动端,PC端都可使用

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

 33132  384  查看评论 (17)
分享到微信朋友圈
X
滑动解锁,移动端,PC端都可使用 ie兼容9

更新时间:2018/2/2 11:04:04

更新说明:

  1. 在onresize事件中修改了页面宽度改变时在已解锁的状态下绿色框宽度不能跟着改变的问题

  2. 在事件中加了locked这个变量来判断是否解锁,未解锁情况下继续执行slide函数来适应要拖拽的宽度

  3. 已解锁的情况下就是根据页面现有宽度来修改绿色框的宽度


1、该插件实现了可适配移动端和PC端的滑动解锁效果。

2、js文件中注释明确提醒了移动端与PC端的功能代码,可分开使用。

3、文件下载后若要调试,可将js文件中两段代码注释掉即可。(如下)

$("*").keydown(function(e) {
    //判断按键  
    e = window.event || e || e.which;
    if (e.keyCode == 123) {
        e.keyCode = 0;
        return false;
    }
});
$(document).bind("contextmenu", function(e) {
    return false;
});
相关插件-拖和放,验证

jQuery可任意拖拽排序菜单树机构树

jQuery可任意拖拽排序菜单树机构树
  拖和放
 43550  409

jquery拖动排序插件Nestable

jquery拖动排序插件Nestable
  拖和放
 85299  473

页面多板块拖动,调整边缘,吸附效果(原创)

接到一个需求:楼宇房间的简单布局:点击左侧房屋号码,到右面出现以后可以各种调整。
  拖和放
 30421  358

jQuery移动端手势滑动切换(原创)

仿探探应用首页,原生图片切换(个人原创)移动端
  拖和放
 30454  334

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

    阿落 0
    2022/10/29 15:59:38
    邢行 0
    2020/1/9 9:59:55
    *上邪!!! 0
    2019/11/20 16:07:51
    这个怎么验证呢,普通输入验证码的,后台生成,前台输入完成后,后台判断结果,这个都是前端JS控制的,怎么判断呢 回复
    marine0516 0
    2019/1/10 0:17:58
    huangfeiyang 0
    2019/1/7 16:38:16
    4404690@qq.com,求好人分享一下。刚学习 回复
    丁峰 0
    2018/9/1 22:39:37
    样式表里加密的一段是什么能否公开 : 回复
    炫天@ 0
    2018/7/19 15:14:18
    function slideResetting(tlocked) {
       /// <summary>重置滑动解锁</summary>
       if (tlocked) {
           $('#slide_xbox').html('<div id="btn"><i class="iconfont icon-double-right"></i><img src="" alt="" /></div>');
           $('#slide_xbox').width(初始值);
           --自行修改
           locked = false;
           slide();
       }
    }
    回复
    白告月酱HJH 0
    2018/5/6 12:53:56
    Eason 0
    2018/4/2 16:49:57
    解锁后怎么重置?
        Eason0
        2018/4/3 11:51:54

        搞定

        function slideResetting(tlocked) {
            /// <summary>重置滑动解锁</summary>
        
            if (tlocked) {
                $('#slide_xbox').html('<div id="btn"><i class="iconfont icon-double-right"></i><img src="" alt="" /></div>');
                $('#slide_xbox').width(初始值);
                --自行修改
                locked = false;
                slide();
            }
        }
    回复
    0
    2018/3/30 14:26:52
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复