文档章节

网页从右至左滑出效果

一点灵犀
 一点灵犀
发布于 2016/07/12 16:04
字数 251
阅读 90
收藏 0

本质上是一个独立层(DIV或SECTION等),初始向右对齐,宽度为0,完全打开时变为100%。因此需要定义两个css类。

(初始)关闭状态:

.i-page-slide {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 0;
    height: 100%;
    background-color: #f5f5f5;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

开启状态:

.i-page-open {
    width: 100%;
    -webkit-transform: translate(0);
    transform: translate(0);
}

因此打开浮动页面的方法是:dom.addClass('i-page-open')

关闭的方法则是:dom.removeClass('i-page-open')

一些细节:

  • 打开浮动页面时,最好隐藏后面的非浮动内容区
  • 打开浮动页面时,最好给body设置属性overflow: hidden,待全部关闭时,再撤销
  • 在宽屏(如平板)上,如果想做居中效果,可以利用media query:
/*窗口过宽时整体居中显示*/
[[@media](http://my.oschina.net/u/1447355)](http://my.oschina.net/u/1447355) (min-width: 481px) {
    .i-page-slide {
        left: 50%;
        margin-left: -240px;
    }
}

© 著作权归作者所有

一点灵犀

一点灵犀

粉丝 11
博文 53
码字总数 15777
作品 1
深圳
程序员
私信 提问
Swift-UITableViewCell侧滑功能实现

一、左滑出现删除按钮 实现两个代理方法:设置按钮事件和标题 二、左滑出现多个按钮 三、MGSwipeTableCell 苹果自带的删除按钮只有标题,没有提供滑出的API,并且在iOS 11和iOS < 11的系统按钮...

萌面道人
2017/11/05
0
0
Meta http-equiv属性详解

本文转载于:猿2048网站Meta http-equiv属性详解 Meta http-equiv属性详解(参考链接:http://www.w3school.com.cn/tags/tag_meta.asp) http-equiv顾名思义,相当于http的文件头作用,它可以向...

前端老手
09/01
13
0
一种js 特效,图片动态出现

第一个效果:网站首页会有一个图片轮播的效果,切换到第二张时,先出来个背景图,然后图上面有类似小图片挂件,会带动画效果的出来,比如从左边滑出来, 第二个效果:当你滚动网页时,滚到到...

double9
2014/03/19
291
0
Android 滑动效果入门篇(一)—— ViewFlipper

ViewFilpper 是Android官方提供的一个View容器类,继承于ViewAnimator类,用于实现页面切换,也可以设定时间间隔,让它自动播放。 又ViewAnimator继承至于FrameLayout的,所以ViewFilpper的L...

长平狐
2013/01/06
425
0
react native使用SwipeableFlatList组件实现类似QQ消息列表左滑出现操作按钮的效果

文章目录 说明 使用的组件是SwipeableFlatList和FlatList实现的效果差不多,只是在列表上左滑出现了类似QQ消息列表的操作按钮,直接贴出列表代码。公用属性请看 这里 SwipeableFlatList组件特...

one_four_two
01/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Flink Graph生成及Hash生成分析

222

MrPei
17分钟前
1
0
[译]Android Activity 和 Fragment 状态保存与恢复的最佳实践

https://blog.csdn.net/growing_tree/article/details/53759564 https://blog.csdn.net/u013588712/article/details/54691791...

shzwork
18分钟前
1
0
调用第三方快递鸟物流单号查询接口API代码示例

最近进行网站后台开发,需要实现物流的即时查询,发现之前集成的 快递100物流查询 API ——【PHP 快递查询源码资源】 已经不能正常使用了; 为了方便以后的业务需求,经过比较,最后选择使用...

程序的小猿
25分钟前
3
0
java Poi 操作执行excel 文件中函数问题

poi 读取excel 文件,当excel 有函数时,poi直接读取返回的是excel 函数,并不能返回函数计算结果: 解决步骤: sheet.setForceFormulaRecalculation(true); 判断该列格式是否为...

早a
33分钟前
4
0
js模拟实现输入框input事件

直接修改value值是无法触发对应元素的事件的。 通过发送输入框input事件了, 可以触发。 这里简单封装了一个方法. window.inputValue = function (dom, st) { var evt = new InputEvent('i...

開援带碼
34分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部