移动web滑屏框架分享_html/css_WEB-ITnose
最初接触是使用iscroll4.js的框架,毕竟它是比较成熟的,用起来会让人觉得放心,可惜它在android2.3下滑屏效果兼容性不是很好,另外还有一个缺点是这个框架的有25K,为了一个滑屏的效果加载25K的代码是不划算的~
后来找了2个比较简单的(轻量、少bug),这里推荐给大家,有需要的同学不要错过。
(有些同学会问:为什么不使用左右滑屏呢?原因之一是在微信浏览器中,向右滑动屏幕可能导致用户误操退出当前页面)
下面给2个上下滑屏的例子~
实例一,简单的上下滑屏
实例二,简单的上下滑屏,滑动中附加了动画~
设计滑屏框架的办法一般有2种
控制父容器法
通过控制父元素的transform: translateY或margin-top或top的值来上下滑动页面,每次的位移的取值为当前页面高度~
这里采用slip框架,库大小5.75K,非常轻量,可以放心用在你的项目~
slip框架的页面样式需要自定义,不过这里我简单写好了~
(如果你不使用框架,推荐用transform: translate(X,Y)的写法,首先transform: translate可设计高性能动画,其次兼容android2.3+的系统,transform: translateY不兼容android2.3的系统)
兼容ios5+、android2.3+系统,其滑屏功能,响应灵敏~如果你只需要设计简单的滑屏效果,可考虑它~
slip框架更多详细的功能猛击这里https://github.com/binnng/slip.js
代码:
slip 第1屏第2屏第3屏第4屏
下载demo
控制子容器法
方法是只显示其中一个子元素,其它隐藏,滑屏时隐藏当前元素,并显示当前元素的下一个同辈元素~
这里采用fullPage框架,库大小7.69K~
fullPage框架的页面样式无需自定义,已有写好的
兼容ios5+、android2.3+系统,其滑屏功能,效果比较丰富,支持缩放、旋转、透明度、自动滑屏等动画效果~如果你需要设计精彩的滑屏效果,可考虑它~
fullPage框架更多详细的功能猛击这里https://github.com/powy1993/fullpage
代码:
fullPage
下载demo
转载自白色橡树:
上一篇: php制作简单模版引擎_PHP
下一篇: vue获取input输入值详解
推荐阅读
-
移动web滑屏框架分享_html/css_WEB-ITnose
-
跨屏测 Adaptest 移动适配 CSS v1.1 发布_html/css_WEB-ITnose
-
跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画_html/css_WEB-ITnose
-
CSS(media query)实现移动端横竖屏提示_html/css_WEB-ITnose
-
CSS(media query)实现移动端横竖屏提示_html/css_WEB-ITnose
-
【无私分享:从入门到精通ASP.NET MVC】从0开始,一起搭框架、做项目 登录界面前端样式和特效_html/css_WEB-ITnose
-
移动web滑屏框架分享_html/css_WEB-ITnose
-
利用轮播原理结合hammer.js实现简洁的滑屏功能_html/css_WEB-ITnose
-
分享个人博客皮肤【兼容移动端】_html/css_WEB-ITnose
-
利用轮播原理结合hammer.js实现简洁的滑屏功能_html/css_WEB-ITnose