
2018/07/16更新:
两年前写的插件,最近又用到类似功能,发现许多可改进的地方,所以重写了一版。主要优化了容器结构,添加了px宽度单位的支持、添加了回调功能,添加了遮罩关闭的判断等。因为没依赖jQuery,使用的querySelectorAll作为选择器,可能对pc端低版本浏览器不太友好,更适用于移动端。
侧边菜单相信大家都很熟悉,QQ滴滴都在用,而且用户体验也很好。正好最近项目上有类似需求,而且不仅仅是左侧滑出(如隐藏的菜单),还有底部滑出(像意见反馈之类的弹窗)。我把它作了简单的封装,基本实现了从四个方向的滑窗效果。
用法:
- 引入mSlider.js (注:无需引入jQuery库)
 
  <script src="mSlider.js"></script>- new一个实例:
 
   var demo = new mSlider({dom: "#xxxx"})- 绑定方法:
 
    demo.open()属性:
| 属性 | 说明 | 举例 | 
| dom | 容器节点(必填) | 如:"#xxx" 、 ".xxx" | 
| distance | 弹层宽度(选填,默认"60%") | 支持:px | % | auto | 
| time | 自动关闭时间(选填,默认不关闭) | 单位毫秒,如"2000" | 
| direction | 弹出方向(选填,默认"left") | 支持left、right、top、bottom | 
| maskClose | 点击遮罩关闭弹层(选填,默认true) | |
| callback | 关闭弹层时回调函数(选填) | 
方法:
| 方法名 | 说明 | 举例 | 
| .open() | 打开弹窗 | 如:xxx.open() | 
| .close() | 关闭弹窗 | 如:xxx.close() | 
演示DEMO
http://denghao.me/demo/2016/mslider.html
扫描二维码观看,
由于写得仓促,难免有bug,如你有兴趣请留言,请到github上跟进最新版本。[github地址]
(本篇完。有疑问欢迎留言探讨)
            
            热门文章
- YouTube评论翻译插件《油管评论翻译机》上线了(106,427)
 - 微信小程序“拍照识图”上线(72,007)
 - 基金助手--chrome浏览器插件(63,681)
 - 《油管评论翻译机》使用说明书(54,687)
 - 拍照识别彩票结果在线工具(48,423)
 - YouTube评论导出免费在线工具(36,503)
 - 自用YouTube抓取评论+翻译工具(31,435)
 - vue+tabs动态组件方案漫谈(30,604)
 - 网页打印插件Print.js(29,298)
 - px转rem/vw方法小结(18,689)
 


当内容超过屏幕时,希望能出现滚动条