用JS开发页面动画效果时的一个设计思路
作者：Justin 来源：Justin’s Blog 发布时间：2008-02-03 15:12:00
首先说明下范围
用Javascript来开发WEB页面的动画效果
该思路同时考虑页面效率、SEO，如果数据大，也可以缓解后端压力。
这个是程序设计思路
还谈不上思想，只是自己实践使用过的一个方法
我们经常看到网页上有各种各样的动画，例如下图
有N条记录，需要在页面上滚动显示，并且需要循环。
我们先假设一下条件
这些记录都需要被搜索引擎收录
直接对页面元素做动画有困难（这里可能比较简单，但是困难的情况还是很多的）
信息需要循环显示
数据比较多，N条
这个时候出现问题
数据必须是HTML标签，不能直接写入JS
直接对页面元素控制，并做动画有难度。由于要循环，得拆分子元素
数据比较多，控制子元素会出现效率问题
第一个问题呢，我们这么做，让HTML载入，然后用JS来读取HTML信息作为数据控制。这个应该比较简单的。
第二个问题怎么搞呢，我们在读完数据之后，再搞出一个代理层来，比如叫A层。那么A层仅仅是提供显示，JS控制这个层来做动画。每次动画的时候呢把新的数据填进去，再做动画。
第三个问题迎刃而解，控制A层就OK了。
Y方案：具体看看流程吧：（我把JS读取数据的步骤省略不说了，这个相信大家都知道怎么搞）
第一步，元素的层次结构：
A层 z-index:2;———— 隐藏 //负责动画
真层 z-index:1;———— 显示 //给爬虫看，且负责显示的当前信息
第二步动画：完成后返回第一步既可。
A层填入数据–》显示–》动画
动画结束之后，B层直接设置坐标，到标准位置
A层隐藏。
上面这样做的理由是，填数据的过程，是会造成页面抖动的，所以我们把这个过程隐藏的来完成。
更升级的问题，如果真层直接设置坐标也比较困难，怎么办？那么就再搞个B层出来
X方案：
A层 z-index:3;———— 隐藏 //负责动画
B层 z-index:2;———— 显示 //只显示当前信息
真层 z-index:1;———— 隐藏 //仅仅给爬虫看，以及读取数据用，之后不再显示
动画的时候，A填入数据–》A显示–》A动画–》B填入数据–》A隐藏
再升级下问题：如果数据实在太多，没法一次用HTML载入完成，怎么办？那么用AJAX来搞吧，具体做法和上面一样
从具体到抽象：设计的思路是数据和表现分离。
给用户看的其实是一个JS创建出来的层，不断的更新数据，不断的隐藏显示来造成假象，然后做动画。
注意的问题：如果每个item中，图片比较多，可能会浪费浏览器的渲染时间和增加HTTP请求。适合用Y方案。如果数据需要异步，且比较难控制坐标的时候，那么适合用X方案。
0
投稿猜你喜欢
页面重构需要考虑的一个重点是XHTML代码语义化，就算是在无任何CSS样式修饰的情况下也能给他人在阅读时带来便利，甚至可以夸张点说在搜索引擎- 感谢人类方方面面的创新，今天Web开发已经不需要在如何设计网站上面浪费时间了。框架和库帮助web开发者得以专注于真正的开发工作上。下面的这些
- 很多开发人员对于IIS和ASP.NET的安装等问题困扰,特此做下面的小总结,请大家多交流!iis 坏了修复办法!一般IIS运行不了ASP.N
- 用 ASP (using jscript) 在服务端创建 GUID 的代码如下：function GUID(){ ret
- 在SQL Server 2008里安装审计，步骤如下：1. 给每个SQL Server 2008具体实例创建一个SQL Server审计2.
- 1. 相对与比较老的环境，建议使用第二个 set dbconnection=Server.CREATEOBJECT("ADODB.
- rs.open语句详细说明rs.Open [第一个参数],
- 在Soundbreak我们每天24小时不间断地播放实况音频和视频，所以对于MySQL的新增的复制特性，我们不能做出很令人信服的测试。通过测试
- asp数字分页涵数参数说明：SQL: 查询语句，PageSizeN: 每页显示多少新闻记录classid: 栏目ID，PageCountS:
- MySQL中有许多操作符和函数可以返回字符串。本节回答这个问题：返回的字符串使用什么字符集和 校对规则?对于简单的函数，即接收字符串输入然后
- 百度有啊2009年情人节logo——大纸袋GG给大纸袋MM送了枝玫瑰花，大纸袋MM奖励了大纸袋GG一个吻，好可爱！淘宝网2009年情人节lo
- 方法来源于土豆网的导航，在这里纪录一下实现的思路。主要是利用 position 属性的 absolute 和 relative 配
- asp+js做的一个dig程序中的投票（有的叫顶一下，踩一下），由于代码较长，只贴出核心部分：投票中的代码相关文章推荐：ajax +asp
- 我很想自己写一个这样的程序，不过wordpress是php的，我blog是ASP的，只好用ASP写代码了。经过一番折腾测试，终于让我的梦想变
- 方法如下： response.cookies(cookiesname)[(key)|.attribute]=value 解释如下：cooki
- 使用 Response.Redirect "aspxhome.asp" 转向方法的HTTP Status Code 为3
- 今天碰到这个极度郁闷的报错，搞了大半下午，才发现是ie的问题，忍不住大骂。例子是这样的：页面中有多处能出发菜单，并且菜单出现在触发点的旁边，
- SQL Server具有强大的复制功能，除了将数据和数据库对象从一个数据库复制并准确分发的另一个数据库中，还要实行数据库之间的同步。SQL
- 启发式评估法（Heuristic Evaluation）是一种用来发现用户界面设计中的可用性问题从而使这些问题作为再设计过程中的一部分被重视
- 今天把博客的日历脚本又改了一改，就帖上了，以后找起来方便一点，同时也给需要的人带来方便，本来还想加点功能再帖上来，不过我看还是没必要了，帖的
