一个简单的九宫画册效果

以前看到这种九宫格一样的图片效果，很羡慕。心血来潮，就模仿写了下。

越写越冒汗，觉得实在是很简单（当然要写完善也不简单），越来越觉得自己JS水平实在不怎么样。看看代码，才短短几行，唉，现在觉得能写出jQuery 插件的人才能算是有水平的人了。

代码如下：

HTML：

<script type="text/javascript">
var edge = { width: $('ul').width(), height: $('ul').height() };
var SideWidth = 100;
$(function() {
//待所有LI自动就位后，设置好position这个CSS属性
$('ul>li').each(function() {
$(this).css({ "left": $(this).position().left + "px", "top": $(this).position().top + "px" });
$(this).attr('ref', $(this).css('left')).attr('lang', $(this).css('top')); //记录原始left和top，用于恢复位置
}).each(function() {
$(this).css({ "position": "absolute" });
});
$('ul>li').hover(function() {
$(this).css({ "z-index": "10" }).animate({ width: SideWidth + "px", height: SideWidth + "px", left: fnGetRelateLength(this, "left"), top: fnGetRelateLength(this, "top") }, "fast");
}, function() {
$(this).animate({ width: "58px", height: "58px", "top": $(this).attr('lang'), 'left': $(this).attr('ref') }, "fast", function() { $(this).css({ "z-index": "0" }) });
});
});

//获取相对的绝对定位位置
function fnGetRelateLength(obj, attr) {
var theObj = $(obj);
var relateLength = null;
if (parseInt(theObj.css(attr).replace("px", "")) > 0) {//防止越界
relateLength = theObj.css(attr).replace("px", "") - 20;
if (relateLength + SideWidth > (attr == "top" ? edge.height : edge.width)) {
relateLength = (attr == "top" ? edge.height : edge.width) - SideWidth - 2;//-2是为了让它的border有显示。这个位置不好，要处理
}
} else {
relateLength = 0;
}
theObj = null;
return relateLength + "px";
}
</script>