WEB开发网
开发学院网页设计JavaScript Google 首页代码分析及简评 阅读

Google 首页代码分析及简评

 2010-09-14 13:09:06 来源:WEB开发网   
核心提示:Google.cn 首页界面简洁,尤其是中下部“视频”“图片”“生活”等小图标的动画效果还很炫目,Google 首页代码分析及简评, 几乎天天打开 google.cn 页面,有没有想到看看这个页面的 Html 代码是什么样子?当试图分析其 Html

Google.cn 首页界面简洁,尤其是中下部“视频”“图片”“生活”等小图标的动画效果还很炫目。

几乎天天打开 google.cn 页面,有没有想到看看这个页面的 Html 代码是什么样子?当试图分析其 Html 代码时会发现,虽然页面看起来简单,但代码并不是想像的那么简单!

Google 首页代码分析及简评

分析其代码发现:

以<Div>和表格混合布局,并不是所谓的纯粹的 XHTML <Div>+CSS “Web标准”布局;

<script> 也不加 language="javascript";

标签的属性也不用 "" 或 '' 括起来。

使用 Javascript 的比较生僻的语句形式,比如 window.google = {kEI:"oCDVSLaCH4vu6gOGmLm0CA",kEXPI:"17259,17735",kHL:"zh-CN"}

Javascript 代码写的晦涩难懂,变量用单个字母表示,意义不明确,是为了显示技巧高超,还是为了“保密”?

“视频”“图片”……等地方的效果不是用 Html 代码构建,而是用纯粹的 js 代码构造,不知道是手工写的,还是用什么工具完成的?

本人把“很炫目”那部分的代码扣了下来,效果还在,但还是 js 脚本的形式。本人没有进一步深入分析,想进一步分析的可以自己做,希望能把新的与大家共享。

其实“很炫目”的那个效果并没用很玄的编程技巧,无非就是把类似动画帧的几个图片按时间顺序分别显示了一下,做出了动感的效果。大家看一下图片就能意识到。但具体怎么实现还要看代码。

1 2 3  下一页

Tags:Google 首页 代码

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接