マウスオーバーで画像を拡大・縮小させてDock（ドック）風？にしてみました。

画像を元のサイズより小さく表示させておいて、
マウスオーバーで元のサイズを表示させて画像が大きくなったように見せるアニメーションです。

▼以下が実際のソースサンプルです。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    $(function() {
     $('#nav li img').hover(
      function(){
        $(this).stop().animate({
          'width':'100px',
          'height':'100px',
          'marginTop':'-20px',
          'marginLeft':'-10px',
          'marginRight':'-10px'
        },100);
      },
      function () {
        $(this).stop().animate({
          'width':'80px',
          'height':'80px',
          'marginTop':'0px',
          'marginLeft':'0px',
          'marginRight':'0px'
        },200);
      }
      );
   });

  </script>

基準となるwidth/heightをJavaScriptを使って表示する画像のサイズを拡大/縮小させています。
さらに、Macのdock風のbottom基準をするために、
JavaScriptの”marginTop”を調節しています。

▼CSS

<style type="text/css">
#nav {
	margin-top: -80px;
	margin-left: 200px;
	list-style: none;
}
#nav li {
	margin-bottom: 0.8em;
	float: left;
	margin: 0 30px;
}
#nav li a {
	text-decoration: none;
}
</style>

▼HTML

<ul id="nav">
  <li><a href="#"><img src="img/globe.png" width="80" height="80"></a></li>
  <li><a href="#"><img src="img/sites.png" width="80" height="80"></a></li>
  <li><a href="#"><img src="img/music.png" width="80" height="80"></a></li>
  <li><a href="#"><img src="img/photos_alt.png" width="80" height="80"></a></li>
  <li><a href="#"><img src="img/documents.png" width="80" height="80"></a></li>
  <li><a href="#"><img src="img/empty.png" width="80" height="80"></a></li>
</ul>

今回、参考にさせていただいたのは、
『プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ – NEET-NAVI』さんです。

ありがとうございます。

デモページは、こちら