JavaScript + Ajax 実践サンプル集 - jQueryでMac風のアイコンドックを表示する

jQueryでMac風のアイコンドックを表示する

説明補足説明コード関連書籍コメント投稿

このサンプルは、CSSとjQueryを利用してMac風のアイコンドックを表示します。マウスをアイコンに移動するとアイコンがドックから飛び出します。そして、アイコンからマウスを遠ざけるとアイコンがドックに戻ります。ここでは、CSS版とjQuery版を用意しました。 jQueryでアイコンを拡大するときanimate()を使用しています。

このサンプルを編集して試してみる

このサンプルの解説はこちらをご覧ください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Mac-like icon dock (v2) - using jQuery </title>
  <link href="jQuery/macLikeIconDock/project.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  
  <script type="text/javascript">
    //Enhance IE6 to include .pngs    
    if ($.browser.msie && $.browser.version == "6.0") {
      $(document).ready(function () {
        $("body *").each(function (i) {
          var bgIMG = $(this).css('background-image');

if (bgIMG.indexOf(".png") != -1) {
            var iebg = bgIMG.split('url("')[1].split('")')[0];
            $(this).css('background-image', 'none');
            $(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='scale')";
          }
        });
      });
    }
  </script>
  
  <link href="jQuery/macLikeIconDock/style.css" rel="stylesheet" type="text/css" />
  
 
  <script type="text/javascript">
    $(function () {
      $(".icon_dock:last").addClass("icon_enlarge");
    });
  </script>
  
  <script type="text/javascript">
    var HOVER_SCALE = 2.0;
    var PROXIMITY = 200.0;

$(function () {
      $(".icon_enlarge").each(function (i) {
       
        var dock = $(this);
        var dock_icons = dock.find("li a");
               
        $.each(dock_icons, function () {
          var initHeight = parseInt($(this).height());
          var initWidth = parseInt($(this).width());

$(this).data("initWidth", initWidth);
          $(this).data("initHeight", initHeight);

$(this).data("newWidth", initWidth * HOVER_SCALE);
          $(this).data("newHeight", initHeight * HOVER_SCALE);
        });
           
        dock.bind("mouseleave", function (event) {
          $.each(dock_icons, function () {
            $(this).animate({ "height": $(this).data("initHeight") + "px", "width": $(this).data("initWidth") + "px" }, "fast");
          });
        });

dock.bind("mousemove", function (event) {
          $.each(dock_icons, function () {
            var newSize = calculateDockIconSize($(this), event.pageX);

$(this).stop();
            $(this).width(newSize[0]);
            $(this).height(newSize[1]);
          });
        });
      });
    });

function calculateDockIconSize(icon, mousePosX) {
    
      var initWidth = parseInt($(icon).data("initWidth"));
      var initHeight = parseInt($(icon).data("initHeight"));
      var newWidth = parseInt($(icon).data("newWidth"));
      var newHeight = parseInt($(icon).data("newHeight"));

var xProximity = Math.abs(mousePosX - $(icon).offset().left - (newWidth / 2.0));

if (xProximity < PROXIMITY) {       
        var newRatio = ((PROXIMITY - xProximity) / PROXIMITY);
        var additionalWidth = newRatio * (newWidth - initWidth);
        var additionalHeight = newRatio * (newHeight - initHeight);       
        return [(initWidth + additionalWidth), (initHeight + additionalHeight)];
      } else {        
        return [initWidth, initHeight];
      }
    }
  </script>
</head>
<body>

<div class="page" id="jquery_page">
    <div id="demo">
      <h5>Without JavaScript</h5>
      <div class="navigation">
        <ul class="icon_dock">
          <li><a href="#"><span>Internet</span><img src="jQuery/macLikeIconDock/icons/world.png"
            alt="[Internet icon]" title="Internet" /></a></li>
          <li><a href="#"><span>Chat</span><img src="jQuery/macLikeIconDock/icons/chat.png"
            alt="[Chat icon]" title="Chat" /></a></li>
          <li><a href="#"><span>Contact</span><img src="jQuery/macLikeIconDock/icons/contact.png"
            alt="[Contact icon]" title="Contact" /></a></li>
          <li><a href="#"><span>Notes</span><img src="jQuery/macLikeIconDock/icons/notes.png"
            alt="[Notes icon]" title="Notes" /></a></li>
          <li><a href="#"><span>Folder</span><img src="jQuery/macLikeIconDock/icons/folder.png"
            alt="[Folder icon]" title="Folder" /></a></li>
          <li><a href="#"><span>Settings</span><img src="jQuery/macLikeIconDock/icons/lock.png"
            alt="[Settings icon]" title="Settings" /></a></li>
          <li class="seperator"></li>
          <li><a href="#"><span>Help</span><img src="jQuery/macLikeIconDock/icons/about.png"
            alt="[Help icon]" title="Help" /></a></li>
          <li><a href="#"><span>Desktop</span><img src="jQuery/macLikeIconDock/icons/desktop.png"
            alt="[Desktop icon]" title="Desktop" /></a></li>
          <li><a href="#"><span>Bin</span><img src="jQuery/macLikeIconDock/icons/garbage.png"
            alt="[Bin icon]" title="Bin" /></a></li>
        </ul>
      </div>

<h5>With JavaScript</h5>
      <div class="navigation">
        <ul class="icon_dock">
          <li><a href="#"><span>Internet</span><img src="jQuery/macLikeIconDock/icons/world.png"
            alt="[Internet icon]" title="Internet" /></a></li>
          <li><a href="#"><span>Chat</span><img src="jQuery/macLikeIconDock/icons/chat.png"
            alt="[Chat icon]" title="Chat" /></a></li>
          <li><a href="#"><span>Contact</span><img src="jQuery/macLikeIconDock/icons/contact.png"
            alt="[Contact icon]" title="Contact" /></a></li>
          <li><a href="#"><span>Notes</span><img src="jQuery/macLikeIconDock/icons/notes.png"
            alt="[Notes icon]" title="Notes" /></a></li>
          <li><a href="#"><span>Folder</span><img src="jQuery/macLikeIconDock/icons/folder.png"
            alt="[Folder icon]" title="Folder" /></a></li>
          <li><a href="#"><span>Settings</span><img src="jQuery/macLikeIconDock/icons/lock.png"
            alt="[Settings icon]" title="Settings" /></a></li>
          <li class="seperator"></li>
          <li><a href="#"><span>Help</span><img src="jQuery/macLikeIconDock/icons/about.png"
            alt="[Help icon]" title="Help" /></a></li>
          <li><a href="#"><span>Desktop</span><img src="jQuery/macLikeIconDock/icons/desktop.png"
            alt="[Desktop icon]" title="Desktop" /></a></li>
          <li><a href="#"><span>Bin</span><img src="jQuery/macLikeIconDock/icons/garbage.png"
            alt="[Bin icon]" title="Bin" /></a></li>
        </ul>
      </div>
    </div>
  </div>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryでMac風のアイコンドックを表示する

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryでMac風のアイコンドックを表示する

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!