最酷网学习,如何做一个轮播
2015-04-10 11:14
246 查看
这几天参考最酷网做了一个H5场景应用案例,略有收获。
最酷网上的应用案例基本上是一个套路(毕竟是自动生成),在一个<article>标签下写了多个<section>,每个section都代表一个展示页面,当点击下一页/上一页按钮或者上下滑动展示页面,通过js调用和css3实现展示页面的切换和动画的实现。
实现的关键就在于页面切换效果的实现
关于页面切换效果
最酷网:
图片轮播:
可以看到展示页面都是平滑过渡,可以利用transition来实现,有2种实现思路
第一种对应上图,是预先将正在展示页面的上一张页面和下一张页面放置在正在展示页面的上方下方/左边右边,其余页面放在另一个存放区,设置overflow:hidden,使之不可见;当点击下一页时,正在展示的页面移动到下方,原来处在上方的页面移动到展示区,原来下方的页面移动到存放区,再从存放区中取一个页面放到上方,风水轮流转。
如果不这样安排的话就没法实现上滑下滑过渡效果了,上一页类似,可以通过transform:translate或top、left等控制页面位置。
第二种是设置一个非常大的div,width属性设置为所有展示页面之和,设置展示页面float:left属性,通过js改变大div的margin-left或left属性实现展示不同的页面
还有一种轮播是渐隐渐现的形式
这种最好实现了,将所有展示页面(设置position:absolute属性)放在一起,设置transition属性,通过js设置opacity属性即可
另外,轮播的自动更换可以通过setTimeOut实现,有的轮播还带有小导航,如:
这个可以通过监听导航栏的mouseover事件,获取相应的展示页面信息实现
代码实现:https://github.com/cqq626/CarouselDemo
最酷网上的应用案例基本上是一个套路(毕竟是自动生成),在一个<article>标签下写了多个<section>,每个section都代表一个展示页面,当点击下一页/上一页按钮或者上下滑动展示页面,通过js调用和css3实现展示页面的切换和动画的实现。
实现的关键就在于页面切换效果的实现
关于页面切换效果
最酷网:
图片轮播:
可以看到展示页面都是平滑过渡,可以利用transition来实现,有2种实现思路
第一种对应上图,是预先将正在展示页面的上一张页面和下一张页面放置在正在展示页面的上方下方/左边右边,其余页面放在另一个存放区,设置overflow:hidden,使之不可见;当点击下一页时,正在展示的页面移动到下方,原来处在上方的页面移动到展示区,原来下方的页面移动到存放区,再从存放区中取一个页面放到上方,风水轮流转。
如果不这样安排的话就没法实现上滑下滑过渡效果了,上一页类似,可以通过transform:translate或top、left等控制页面位置。
第二种是设置一个非常大的div,width属性设置为所有展示页面之和,设置展示页面float:left属性,通过js改变大div的margin-left或left属性实现展示不同的页面
还有一种轮播是渐隐渐现的形式
这种最好实现了,将所有展示页面(设置position:absolute属性)放在一起,设置transition属性,通过js设置opacity属性即可
另外,轮播的自动更换可以通过setTimeOut实现,有的轮播还带有小导航,如:
这个可以通过监听导航栏的mouseover事件,获取相应的展示页面信息实现
代码实现:https://github.com/cqq626/CarouselDemo
相关文章推荐
- HTC组件学习(如何创建一个HTC组件)
- Oct_32第四日: 如何学习一个新软件
- SilverLight学习笔记--如何在xaml文件中操作用户在后台代码定义的类(2)--示例篇:创建一个登录控件(原创)(转载本文请注明出处)
- tomcat解析(-)学习如何写一个servlet服务器
- 一个学生如何选择嵌入式培训和学习及就业过程
- SAP ABAP/4学习---如何给写好的一个程序分配事务代码,用户可以直接通过事务码来访问程序.或者加入收藏夹(9)
- 如何开始学习一个自动化测试工具?
- Flex中如何给一个按钮添加链接,点击链接打开一个网页呢? - FLEX学习笔记
- 近期的一些学习--当一个程序开发到了中期,突然出现性能问题,如何解决
- [iphone 开发学习笔记]Object-C和C语言最大的区别也是最大的扩展-----消息(即如何调用一个对象中的函数)
- 学习:如何做一个出色的主管(经理)?
- 如何学习一个新的PHP框架
- JAVA学习提高之----如何用Eclipse和Tomcat Plugin来建立一个开发环境(个人实践)
- SilverLight学习笔记-- 如何在一个HyperlinkButton点击后打开新窗口
- SIF如何创建一个安全上下文学习
- 一个网友如何选择学习方向的问题
- 分享一个有趣的学习方法,欢迎一起探讨如何提高学习兴趣
- 国际:如何学习一个新的PHP框架
- O3D 学习—如何复制一个Transform的模型
- 看到一个大牛指导如何学习汇编方法感悟