文档章节

实现侧滑栏

mitu
 mitu
发布于 2016/12/05 15:06
字数 146
阅读 10
收藏 0
点赞 0
评论 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 ⋅ 0

侧滑菜单(抽屉效果)DrawerLayout实现原理

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

Ihesong ⋅ 2017/10/15 ⋅ 0

微信小程序-商品列表左=>右联动(一)

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

刘飞_ ⋅ 2017/09/22 ⋅ 0

程序猿媛七:slidingmenu侧滑栏导航

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

花佟林雨月 ⋅ 2014/03/30 ⋅ 0

仿天猫、淘宝的侧滑菜单栏

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

Jesse1949 ⋅ 01/30 ⋅ 0

iOS 侧滑菜单--YSHYSlideController

这是一个实现侧滑菜单的小demo,只需进行简单的配置就可实现侧滑的菜单的效果 支持点击更多按钮显示/关闭菜单栏,支持滑动显示/关闭菜单栏 支持自定义菜单

yangshuyuan ⋅ 2015/11/02 ⋅ 1

微信小程序-商品列表右=>左联动(二)

上一篇:《微信小程序-商品列表左=>右联动(一)》 上一篇讲解了左=>右联动,那个还比较简单,本篇写剩下比较核心的部分,也是本次开发过程中遇到最难的部分,右=>左联动,先简单看一下演示 ...

刘飞_ ⋅ 2017/09/23 ⋅ 0

【swift3.0】【自定义导航栏的一些设置】

贡献作者 -【XJDomain】 博客XJ: https://my.oschina.net/shengbingli/blog GitHub直播地址: https://github.com/lishengbing/XJDomainLive 1:设置导航栏的背景色的三种方法: http://www.j......

XJDomain ⋅ 2016/12/15 ⋅ 0

iOS开发tips-UINavigationBar的切换

概述 在iOS系统中,如果控制器是以push方式进行管理的话,那么事实上多个控制器是共享的同一个导航栏。当然iOS系统的设计无可厚非,但是国内的应用经常会遇到很多个性的设计,就比如说A pus...

jianxin160 ⋅ 2017/11/08 ⋅ 0

WWSideslipViewController

WWSideslipViewController 模仿 QQ 的侧滑效果。支持左边栏侧滑、右边栏侧滑、滑动设置等功能。 非常简便的方法初始化 LeftViewController * left = [[LeftViewController alloc]init]; Main...

红薯 ⋅ 2014/09/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sbt网络问题解决方案

http://dblab.xmu.edu.cn/blog/maven-network-problem/

狐狸老侠 ⋅ 9分钟前 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 53分钟前 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 58分钟前 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部