瓷砖效果随窗口大小缩放的jQuery图片展示

瓷砖效果随窗口大小缩放的jQuery图片展示。图片一开始杂乱的排在页面上，就像满地的瓷砖。当点击一张小图后，会发现小图全部向中间汇聚，最终形成你点击的那张小图放大版。形成大图后，左右会出现向左和向右的按钮，点击可以切换图片展示。如果再点击大图，又会分散成小图铺满页面。当您改变浏览器窗口大小的时候，小图会自适应的向内集中或者向外扩散以适应浏览器窗口。由于图片的立体效果和缩略图角度改变都是用了css3，所以在IE8以上浏览器没有这种立体效果。 第一步、在head区域引入下面的代码：

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
    Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
    Cufon.replace('.description',{ textShadow: '1px 1px #fff'});
    Cufon.replace('a',{ textShadow: '1px 1px #fff', hover : true});
</script>
<style type="text/css">
    .description{
        position:fixed;
        right:10px;
        top:10px;
        font-size:12px;
        color:#888;
    }
    span.reference{
        position:fixed;
        left:10px;
        bottom:10px;
        font-size:12px;
    }
    span.reference a{
        color:#888;
        text-transform:uppercase;
        text-decoration:none;
        padding-right:20px;
    }
    span.reference a:hover{
        color:#444;
    }
</style>

第二步、在body区域引入<!-- 代码开始 -->和<!-- 代码结束 -->之间的代码。

注：1、大图放在images文件夹，小图放在images里面的thumbs文件夹。
      2、大图和小图命名要一样，在html代码里面直接设置小图的路径即可。