文档章节

实现侧滑栏

mitu
 mitu
发布于 2016/12/05 15:06
字数 146
阅读 12
收藏 0

实现水平侧滑,需求需要写一个弹出框水平滑动显示和隐藏,本来用jquery的show()和hide()可惜没有动画效果,后来采用了tranform和transition实现,注意这里不要采用display:none,因为动画会和此属性冲突。

@media (max-width: 767px){
   /*查询条件变为滑动*/
    .responsiveTableForm{
        float:right;
        position: absolute;
        left:0px;
        right: 0px;
        width:100%;
        padding:20px 0;
        z-index: 5000;
        background-color: #FFFFFF;
        transform:translate(767px,0);
        transition:transform .3s ease-out;
    }
    .responsiveTableForm.active{
       transform:translate(0,0);
    }
}
/*遮罩层*/
.modal-cover{
    display: none;
    position: absolute;
    z-index: 3000;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=50);
}

© 著作权归作者所有

共有 人打赏支持
mitu
粉丝 0
博文 9
码字总数 1961
作品 0
聊城
私信 提问
抽屉式侧滑栏navigationview可以添加底栏吗?

最近做了个项目是用navigationview实现侧滑栏的,刚开始没有注意,好像只有headerLayout和menu可以添加条目, 现在需要在侧滑栏添加一个底栏,类似于手机QQ侧滑栏的底部.有大神知道怎么实现吗?...

挽狂澜于既倒
2017/01/13
125
0
侧滑菜单(抽屉效果)DrawerLayout实现原理

DrawerLayout是android support包新增的侧滑菜单控件,在Android Studio中可以很方便的创建一个带有侧滑菜单的页面。今天,我们来分析DrawerLayout它的实现原理,来加深对它的了解。为了能让...

Ihesong
2017/10/15
0
0
微信小程序-商品列表左=>右联动(一)

先前看到网上不少大神写的demo,其菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字)。而笔者现在写的项目菜单栏为汉字,所以需要改变数据格式,...

刘飞_
2017/09/22
0
0
程序猿媛七:slidingmenu侧滑栏导航

SlidingMenu侧滑栏导航 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。 转载请保留原文出处“http://my.oschina.net/gluoyer/blog/214399”,谢谢! 您可以到博客的“友情...

花佟林雨月
2014/03/30
0
0
仿天猫、淘宝的侧滑菜单栏

最近项目需求,需要写一个筛选功能的侧滑菜单栏。像京东、淘宝、天猫都有这种效果,尤其天猫的效果最好,于是就按照天猫的效果封装了一个侧滑菜单栏工具。 先看下天猫的点击右上角筛选,会有...

Jesse1949
01/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

oh-my-zsh 自定义

GitHub 地址 基于 oh-my-zsh 的自定义配置,增加了一些个人常用插件与皮肤。 采用的是 git submodule 来维护,包括 oh-my-zsh,之所以这么搞,主要是手头有多台 linux 需要维护, 每台机器、...

郁也风
今天
5
0
Docker安装踩坑:E_FAIL 0x80004005的解决

参考 菜鸟教程--Windows Docker 安装 http://www.runoob.com/docker/windows-docker-install.html 官方文档-Install Docker Toolbox on Windows https://docs.docker.com/toolbox/toolbox_in......

karma123
今天
5
0
js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
17
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
27
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
33
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部