移动端弹性效果

布局一：定义页面整体高度为100%，然后使用 position:absolute 布局可解决

<body>

<div class="header">header</div>

弹性滚动区域

</div>

<div class="footer">footer</div>

</div>

</body>

html,body{height:100%;}

.wrap{width:100%;}

.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}

.header{position: absolute;top:0;left:0;width:100%;}

.footer{position: absolute;bottom:0;left:0;width:100%;}

.main{

position:absolute;

z-index:1;

top:40px;

left:0;

bottom:40px;

width:100%;

}

布局二：定义页面整体高度为100%，然后使用 display:flex 布局可解决

<body>

<div class="wrap">

      <div class="header">header</div>

      <div class="main">

       弹性滚动区域

      </div>

      <div class="footer">footer</div>

</div>

</body>

html,body{height:100%;}

.wrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;}

.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}

.main{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;}

那么剩下的主要问题是子容器高度超出父容器高度，子容器内容如何弹性滚动。

.css{

overflow:auto;/* winphone8和android4+ */

-webkit-overflow-scrolling: touch; /* ios5+ */

时间： 2024-08-05 09:13:56

移动端弹性效果的相关文章

界面里滑动时的弹性效果应该叫什么？阻尼效果？

一直这么叫,但是核对了“阻尼”的定义: 阻尼(英语:damping)是指任何振动系统在振动中,由于外界作用和/或系统本身固有的原因引起的振动幅度逐渐下降的特性,以及此一特性的量化表征. 界面的运动只是呈现了弹性的效果,并没有阻尼运动的特征. 应该用什么来描述呢? 弹性效果」指的是类似“页面滚动从快到慢到静止”的渐变效果么? 总的来说,“由快到慢再到静止”这样的一种渐变效果,用「阻尼」来形容,都说得过去.比如:scroll to top,回滚的动画是渐变静止的:小球在桌面跳动效果,弹起高度越来越小

让view有弹性效果

让view有弹性效果 by 伍雪颖 - (void)viewDidLoad { [super viewDidLoad]; CGAffineTransform transform = _view1.transform; transform = CGAffineTransformScale(self.view1.transform, 2, 2); self.view1.transform = transform; } - (IBAction)button:(id)sender { __block V

css3 弹性效果上下翻转demo

最近扒了一个有弹性效果上下翻转demo 上图: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @-webkit-keyframes show { 0% { transform:rotateX(180deg); opacity:0;

HTML连载66-过度模块的连写、弹性效果

一.过渡模块的连写 1.过渡连写格式: 过渡属性过渡时长运动速度延迟时间: 2.过渡连写注意点: (1)和分开写一样,如果想要多个属性添加过渡效果,也是使用逗号来隔开即可. (2)连写的时候可以省略后面的两个参数,因为只要编写了前面的两个参数就已经满足了过渡的三要素. (3)如果多个属性运动的速度/延迟的时间/持续的时间都一样,那么可以简写为? transition:all 0s <style> *{ margin:0; padding:0; } div{ width: 100px

移动端弹性布局--flex

目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. 一. 初识flex 以前我给PC端网页进行布局时,我是基于盒子模型上,然后采用float浮动和position定位这2个主要属性,当时,我对flex布局并不了解.后来当我开始接触移动端项目时,我开始了解新的布局方式,这才知道flex弹性布局的存在. 我为什么会对flex布局有好感呢? 首先是因为以

css移动端:acitve效果的实现

做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有“鼠标指针浮动在其上的元素”的情况,有也很少. 所以取代的应该:active这个选择器,但是通过实践,发现情况不是很理想,在QQ浏览器上有时触发,有没不触发,在我mx3带自浏览器上根本没效果. 最近在看美团h5的页面时发现他们做对这个效果做得很好(这里说实话,美团网在h5这一块做得真好),看了他们代码

原生JavaScript+CSS3实现移动端滑块效果

在做web页面时,无论PC端还是移动端,我们会遇到滑块这样的效果,可能我们往往会想着去网上找插件,其实这个效果非常的简单,插件代码的的代码往往过于臃肿,不如自己动手,自给自足.首先看一下效果图: 分析效果: 1.按钮的右侧有一个小动画,深黄色的小头是一圈圈循环流动的. 2.只在按钮上滑动可以启动按钮. 3.并且要判断按钮是否滑到头,如果没有滑到头,手指离开屏幕,按钮自动弹回左侧:如果滑到头,执行一个函数. 解决办法: 1.动画效果需要使用CSS3里面的@keyframes来操作,代码如下: 1

移动端-弹性盒子

1. /*父级*/ display: box; display: -moz-box; display: -webkit-box; box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-orient: horizontal;/*horizontal表横向,vertical表垂直*/ /*子级*/ width:0; box-sizing: border-box; box-flex: 1; -moz-box-flex: 1;

简单的手机访问电脑文件方法，方便写完页面即使在移动端测试效果，不使用模拟器就能玩了

手机想测问电脑写好的页面文件时,这时部分人人会想到,拷内存卡,拷优盘,直接拷手机里(当然了用模拟器的话这里就例外了),.....普通人一般用这些复制来复制去的方法,作为一个程序员,不自觉的就感觉,这好麻烦啊,或者说好low的操作方法啊....作为一个懂电脑的人,当然不能靠这种方法了,至少不能用数据先了,优盘了,内存卡了这些媒介来拷贝吧,有些人就想了,那我打开笔记本的蓝牙,wifi把文件传手机上,至少看起来没用最low的方法,但是这依然不符合我们的风格啊. 那还想怎么玩呢?直接访问电脑文件!说到