时光博客 - WEB开发中的可用性和用户体验
Tag: top-banner

动网官网系列-Top-banner效果分析

这些时间开始盘算着做一个栏目,系统分析一下各个大型网站的使用模块和炫酷效果
起因是自己没有整理,结果在需要的时候经常浪费了大量时间在网上的搜索和调试。现在系统的总结一下,放在网上希望能够为大家带来点实际的效果,所有的源码均经过自己严格的测试。放心使用。第一期的就从动网官方论坛开始。

动网官方网站的-top-banner如下图:

dvbbs-top-banner.gif

大小: 6.35 K
尺寸: 500 x 42
浏览: 727 次
点击打开新窗口浏览全图

效果:固定在浏览器的顶部,带透明效果,和popmenu效果。
功能:适合做顶部导航,显得大气和自然

下面来分析一下XHTML代码和CSS样式:

访问一下动网官网,查看源代码居然没有看到Top-banner的代码,可以猜想一定是用的JS调入。果然头部定义了

<script language=javascript src="js/title.js" type="text/javascript"></script>

看来是JS的问题,下载下来看到title.js的文件内容,里面还附加了skins/title.css。 

效果点击访问

完整源码包下载地址: uu-top-banner.rar