文档章节

实现侧滑栏

mitu
 mitu
发布于 2016/12/05 15:06
字数 146
阅读 10
收藏 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
115
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nexus Repository Manager 搭建私有docker仓库

Nexus Repository Manager 搭建私有docker仓库 2018年05月08日 14:44:23 阅读数:115 1.下载nexus3的镜像: docker pull sonatype/nexus3 2.使用镜像启动一个容器: docker run -d --name n...

linjin200
13分钟前
0
0
大数据技术的发展趋势

大数据领域已经涌现出了大量新的技术,它们成为大数据采集、存储、处理和呈现的有力武器。这些技术下一步将如何发展?它们之中哪些技术 将广为流行?又会诞生哪些新的技术? 技术趋向多样化,...

董黎明
15分钟前
1
0
谷歌浏览器插件入门示例

实现:任何网址实现图片下载和获取当前域名的cookies的json字符串。 图片下载是给小白用的,可以选中批量下载,获取cookies 是为了方便程序员调试用。 获取cookies: git地址: https://gite...

NLGBZJ
17分钟前
2
0
152. Maximum Product Subarray - LeetCode

Question 152. Maximum Product Subarray Solution 题目大意:求数列中连续子序列的最大连乘积 思路:动态规划实现,现在动态规划理解的还不透,照着公式往上套的,这个问题要注意正负,需要...

yysue
18分钟前
0
0
IDEA工具 jdk,tomcat,maven 配置

设置JDK、tomcat、maven的版本 一、JDK      如果下拉列表没有,SDKS ---> + ----> 选择下载的JDK目录 ---> APPLY OK    二、tomcat 三、Maven    四、生成 git 本地创库...

君千殇520
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部