页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular VUE

jQuery滑动解锁插件SlideUnlock

表单 HTML我帮您 1月前  次浏览
jQuery滑动解锁插件SlideUnlock,滑动解锁插,前很多网站在用户登录和注册时,为防止恶意攻击,采用来滑动解锁的验证方式。用户需要滑动指定的滑块到指定位置,才能通过验证。SlideUnlock 可以实现这种滑动解锁功能。

html

<div class="slideunlock-wrapper">
    <input type="hidden" value="" class="slideunlock-lockable"/>
    <div class="slideunlock-slider">
        <span class="slideunlock-label">span>
        <span class="slideunlock-lable-tip">Slide to unlock!span>
    div>
div>

css

In this case, just set the slider and container style, according to the needs of custom css or pictures, etc.

.slideunlock-wrapper{ width: 360px; position: relative; padding: 50px; background: #ECF0F1; margin: 0 auto;
} .slideunlock-slider{ padding:20px; position: relative; border-radius: 2px; background-color: #FDEB9C; overflow: hidden; text-align: center;
} .slideunlock-slider.success{ background-color: #E5EE9F;
} .slideunlock-label{ width: 40px; position: absolute; left: 0; top: 0; height: 100%; background: #E67E22; z-index: 999; border-radius: 2px; cursor: pointer;
} .slideunlock-label-tip{ z-index: 9;
} @media screen and (max-width: 640px) { .slideunlock-wrapper{ width: 64%;
    }
}

JavaScript

independent of jQuery. See the demo

<script type="text/javascript" src="js/slideunlock.min.js"></script> <script type="text/javascript"> window.onload = function () { var slider = new SliderUnlock(".slideunlock-slider", {}, function(){ alert('success');
        }, function(){ document.querySelector(".warn").innerText = "index:" + slider.index + ", max:" + slider.max + ", lableIndex:" + slider.lableIndex + ", value:" + document.querySelector(".slideunlock-lockable").value + ", date:" + new Date().getUTCDate();
        }); slider.init(); document.querySelector("#reset-btn").addEventListener('click', function(){ slider.reset();
        });
    } </script>

depend on jQuery. See the demo

<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.slideunlock.min.js"></script> <script type="text/javascript"> $(function () { var slider = new SliderUnlock(".slideunlock-slider", {
            labelTip: "滑动解锁",
            successLabelTip: "解锁成功",
            duration: 200 // 动画效果执行时间,默认200ms }, function(){ alert('success');
        }, function(){ $(".warn").text("index:" + slider.index + ", max:" + slider.max + ", lableIndex:" + slider.lableIndex + ", value:" + $(".slideunlock-lockable").val() + ", date:" + new Date().getUTCDate());
        }); slider.init(); $("#reset-btn").on('click', function(){ slider.reset();
        });
    }) </script>
var slider = new SliderUnlock(element, options, success, always); slider.init(); // element is required and right. id or class or any identifying which can be loaded by jquery. // if you dont want to give options, please give a null object, like this -- {}

If you need to support mobile,Please add jQuery mobile plugin:

 

相关链接

发表评论