捣腾了一个基于jQuery的相册效果，仿Fotolog。

Demo

部分已实现的功能：

Ajax加载图片；
自动播放/停止；
图片大小随浏览器窗口自动缩放；
tooltip提示效果；
预加载左右两张图片；
缩略图列表滚动效果；
……

【浏览器支持】
ie8+(明确放弃ie8以下的浏览器兼容)
FF
Safari
Opera

【精简规范的代码架构】

Div框架：

1
2
3
4
5
6
7
8
9
10
11
12

<div #container>
 <div #header>
  <div #login></div>
  <div #address></div>
 </div>
 <div #content>
  <div #title></div>
  <div #imgholder></div>
  <div #scroll-bar></div>
 </div>
 <div #footer></div>
</div>

【采用了部分CSS3效果】
使用了font-face，background-color的rgba写法来支持背景透明，border-radius圆角等，该部分CSS统一置于style文件的底部。并考虑到了优雅降级，不支持这些属性的浏览器均能正常使用。

【未知高度垂直居中】
使用了父元素display:table;子元素display:table-cell;的处理方式来实现未知高度垂直居中，外层容器高度也是未知。
ie系部分浏览器未支持该效果。

【tooltip提示效果】
使用了jQuery插件tipsy，代码有所精简。

【预加载左右两张图片】

1
2
3
4
5
6
7
8
9
10
11
12
13

/* Preload prev and next images being showed */
function proloadNeighbors(index) {
	if (index>0)
	{
		objPrev = new Image();
		objPrev.src = $(".image-list li").eq(index+1).find("img").attr("original");
	}
	if ( index<($(".image-list li").length-1) )
	{
		objNext = new Image();
		objNext.src = $(".image-list li").eq(index-1).find("img").attr("original");
	}
}

【浏览器窗口大小改变时resize图片尺寸】
保持浏览器不出滚动条，且图片最大化显示，增强浏览体验。

【尚待加强的图片缩略图列表滚动效果】
当缩略图列表不能在窗口中完整显示时会启动滚动功能，在鼠标靠近缩略图列表边侧时进行列表的滚动。

【修订清单】
2010.9.27　　　　V 1.0