一个简单的九宫画册效果
以前看到这种九宫格一样的图片效果，很羡慕。心血来潮，就模仿写了下。
越写越冒汗，觉得实在是很简单（当然要写完善也不简单），越来越觉得自己JS水平实在不怎么样。看看代码，才短短几行，唉，现在觉得能写出jQuery 插件的人才能算是有水平的人了。
代码如下：
HTML：
Code<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>矩阵图片放大效果</title>
<style type="text/css">
* { padding: 0; margin: 0; text-align: center; }
body { background: #000; }
ul { margin: 50px auto; width: 180px; height: 180px; overflow: hidden; background: #ccc; position: relative; }
ul li { width: 58px; height: 58px; float: left; overflow: hidden; text-align: center; list-style: none; border: solid 1px #ccc; }
ul li img { width: 100%; height: 100%; cursor: pointer; }
</style>
</head>
<body>
<ul>
<li>
<img alt="" src="images/gallery/thumb-1.jpg" /></li>
<li>
<img alt="" src="images/gallery/thumb-2.jpg" /></li>
<li>
<img alt="" src="images/gallery/thumb-3.jpg" /></li>
<li>
<img alt="" src="images/gallery/thumb-4.jpg" /></li>
<li>
<img alt="" src="images/gallery/thumb-5.jpg" /></li>
<li>
<img alt="" src="images/gallery/thumb-6.jpg" /></li>
<li>
<img alt="" src="images/gallery/thumb-7.jpg" /></li>
<li>
<img alt="" src="images/gallery/thumb-2.jpg" /></li>
<li>
<img alt="" src="images/gallery/thumb-5.jpg" /></li>
</ul>
</body>
</html>
JS代码部分：
Code<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>
