【原创】extjs实现的带标签、翻页动画的书

已经很久没有上javaeye（已经习惯这么称呼论坛了），最近工作不顺利，心情也不好，所以一直没有和大家分享extjs的使用经验。

在09年的时候有个思路，想做一个带标签、带有翻页动画的书的界面展现，用来在同一块可视区域展示不同内容，而不是采用现在比较常见的分栏、分块的样式，这样做的好处是：可视区域面积大，在有限的空间内可以展示单栏、单块内容多。当时没有学习extjs，没有实现，前一段做项目，遇到一个同样可以需要这样界面的地方，所以做了出来，和大家分享。

 

测试环境：IE 8.0（精力有限，其他浏览器尚未做到兼容）。

 

先看一下效果图

 

选择了第一个标签（默认）

 

 

 

点击第二个标签

我的思路是这样的：

 

标签切换：

 

右侧有诺干个标签，每个标签做两个，一个是靠左的完全展现的标签，另外一个是有一部分被书页压住的

（至于图片，我是自己用ps做的，各位可以请美工帮忙做一些）；

动作有鼠标点击触发，点击某一个尚未置前的标签时，隐藏已经置前的标签，展现对应的被书页压住的那个

标签，这里可以在事前处理函数末尾，增加书页对应内容的展现，比如：书页上展现对应标签的文字等；

 

翻页动画：

 

整个过程类似flash动画帧，时间轴从0ms到150ms 然后从200ms到350ms两个动画完成。

我设计的书页是从右侧翻到左侧的（符合大众习惯），翻页动画由两部分组成：

a）将隐藏在最右侧的书页显示 -> 移动到中间 -> 隐藏该书页 -> 移动到书页的最右侧（归位）0ms~150ms；

停止动作50ms，增加冗余时间，防止两侧书页同时出现，也因为js是单进程，防止extjs定时器出错；

b）将隐藏在中间的左侧书页显示 -> 移动最左侧 -> 隐藏该书页 -> 移动到书页中间（归位）200ms~350ms；

 

 

 

 

 

 

注：本博客文章均已注明原创和转载，如转载本博客文章，需注明原文出处或征求原作者同意。

评论

1 楼 OhMyGod0512 2011-10-11