mobile

移动端重构系列13——页面切换

在前面几篇教程当中,说到切入切出的动画,一般用在panel、popup、modal等组件上的效果。但在移动端上常常会要处理页面之间的切换效果。简单的理解,类似PC端上Web页面中的Slidershow效果,也就是大家说的图片轮播效果。只不过这种效果在移动端上略做处理。接下的主要向大家介绍这方面的实现方法。

移动端重构系列12——popup

上一节介绍了移动端中Modal的制作,那么在实际开发当中,除了有Modal这样的弹出窗之外还有另一种弹出效果。这种效果常常被称为“Popup”。俗称“气泡”。那么在这一节中将向大家介绍移动端中的Popup实现方法。

移动端重构系列11——弹窗modal

弹出窗是页面与用户沟通的一种有效方式,我们常把这种效果称为Modal效果。在移动端这样的弹窗效果也是常见的效果之一。如果你将功能划分成每个组件,那么Modal将是你这些组件中的核心组件之一,因为任何网站都有可能离不开这样的弹窗效果。那么我们今天就一起来学习如何在移动端实现Modal的效果。

移动端重构系列10——侧边栏导航

移动端有一个效果常见到,那就是侧边栏的滑出和滑入。默认的时候有一个小图标,当用户触摸这个图标的时候,侧边栏就会滑入,再次触摸的时候就会滑出。在这节中,主要介绍这种侧边栏的实现。

移动端重构系列9——图片滚动

上一节中介绍了移动端的滚动实现,但我们更多看到的效果是图片的滚动,也就是常说的slidershow效果。在这一节中,主要针对图片滚动效果做一定的介绍。

移动端重构系列8——滚动

原生滚动的属性为:-webkit-overflow-scrolling:touch;,如果是走高富帅的苹果路线,是没问题的,谁让这是人家亲生的呢;如果是安卓的话,我真不知道是支持还是不支持,说不支持吧好像有点缓动效果,说支持吧好像把这条属性砍掉也一样,感兴趣的可以自己测试下(添加或删除这个属性对比下)

移动端重构系列7——图标

每个网站都离不开小icon的运用,因此这些icon可以让你的网站起到画龙点睛的效果。在移动端的页面上使用icon更能显出这样的功效。那移动端上运用icon又要怎么使用呢?还PC页面上使用方法一样吗?如果不是,又将怎么使用?请继续往下阅读...

移动端重构系列6——切入切出动画

使用APP的时候,总是能看到很多切入切出的动画效果,甚至是比这个更炫的效果。那么在H5这样的网页上,我们要怎么做这样的效果,有没有CSS实现的方法,或者说怎么让动画效果更细腻呢?在这一节中,将和大家一起探讨切入切出动画的制作。

移动端重构系列5——等分,居中等

等分,居中效果对于你来说是不是已经不是一件难事了,那么移动端的等分和居中这样的效果又要怎么来处理呢?用table还是flexbox这样的CSS3属性呢?或者说还有更好的方案,那么作者将带领你去体会移动端上是怎么实现等分、居中这些效果。

移动端重构系列4——重置样式

重置样式(reset)我想对于前端人员来说并不是陌生的东西,而且这样的重置样式有人喜欢用,也有人不喜欢用。偷懒的同学喜欢直接使用Normalize.css,勤快的同学喜欢在此基础上做一些调整,或者干脆写一个适合自己的重置样式。那么在移动端开发有没有必要要这样的一个重置样式呢?那我们就带着这样的一个问题开始我们今天的学习。

页面

返回顶部