滑动解锁插件slideunlock.js不依赖jquery
2017-08-22 13:44
477 查看
滑动解锁插件slideunlock.js不依赖jquery
滑动解锁插件slideunlock.js不依赖jquery等第三方库,当然,也提供了jquery.slideunlock.js依赖jquery的插件,这个滑动解锁插件适合移动端开发使用,无依赖版的插件js代码均使用的是es5最新滑动解锁插件slideunlock.js不依赖jquery等第三方库,当然,作者也提供了jquery.slideunlock.js依赖jquery的插件,你可以选择使用,懒人建站偏向使用不依赖版,
这个滑动解锁插件适合移动端开发使用,无依赖版的插件js代码均使用的是es5最新语法,IE10以下均不能使用。
我们来看下slideunlock.js节点选择使用了querySelectorAll这在IE10以下版本是不支持的
function $(selector, context) { return (context || document).querySelectorAll(selector); }
示例代码:
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>
js引用
<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>
slideunlock css样式代码
.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%; } }
jquery.slideunlock.js的引用示例:
<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>
slideunlock.js参数列表
labelTip://滑块上的提示文字 successLabelTip://滑块成功后的提示文字 duration://动画持续时间 swipestart://是否开始滑动 min://最小值 max://最大值 index://当前滑动条所处的位置 IsOk://是否滑动成功 lableIndex://鼠标在滑动按钮的位置
链接:滑动解锁插件slideunlock.js不依赖jquery
相关文章推荐
- jQuery使用unlock.js插件实现滑动解锁
- jquery.zSlide.js-基于CSS3/HTML5演示文档jQuery插件
- 【原创】cs+html+js+css模式(六):改造ajax.js,从原来的原生态js修改为依赖于jquery插件
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
- 简单的图片滑动效果插件 jQuery.iocnSlider.js
- 【转载】移动开发中的上下左右滑动插件jquery.swipe.js
- 移动开发中的上下左右滑动插件jquery.swipe.js
- 移动开发中的上下左右滑动插件jquery.swipe.js非常经典的啊!
- hwSlider-内容滑动切换效果(三):jquery.hwSlide.js插件封装
- history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)
- [原创]修改jquery.slideBox.js插件,自定义部分事件
- jQuery滚动插件Sly.js 滑动最后几个元素不在一行 滑动显示不完整
- 可滑动切换的图片轮播——bootstrap中的carousel插件,hammer.js,jquery.hammer.js
- jquery.SuperSlide.js只需要调用一个插件就能实现网页大部分特效--推荐
- js弹出框轻量级插件jquery.boxy使用介绍
- jQuery 版本viewer.js插件的结构分析与学习
- jQuery全屏滚动插件fullPage.js
- JS(含JQuery)一些好插件网站(非常全面)
- 采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
- 仿小米网jQuery全屏滚动插件fullPage.js