2 400 Скрипты / Menu & Nav

Mac OS X icon dock


Панель иконок, как в Mac OS X реализованная на jаvascript и CSS.

HTML

<div id="dock">
    <ul>
        <li><a href="#address"><span>Адрес</span><img src="img/icon-address.png" alt="[address]" /></a></li><!--
        <li><a href="#band"><span>Группа</span><img src="img/icon-band.png" alt="[band]" /></a></li>
        --><li><a href="#calendar"><span>Календарь</span><img src="img/icon-calendar.png" alt="[calendar]" /></a></li><!--
        <li class="active"><a href="#chat"><span>Чат</span><img src="img/icon-chat.png" alt="[chat]" /></a></li>
        --><li class="active"><a href="#music"><span>Музыка</span><img src="img/icon-music.png" alt="[music]" /></a></li><!--
        --><li><a href="#photo"><span>Фото</span><img src="img/icon-photo.png" alt="[photo]" /></a></li><!--
        --><li><a href="#text"><span>Текст</span><img src="img/icon-text.png" alt="[text]" /></a></li><!--
        --><li class="seperator"></li><!--
        --><li><a href="#folder?src=/apps/"><span>Приложения</span><img src="img/icon-applications.png" alt="[apps]" /></a></li><!--
        --><li><a href="#folder?src=/pictures/"><span>Фотографии</span><img src="img/icon-pictures.png" alt="[pictures]" /></a></li><!--
        <li><a href="#folder?src=/documents/"><span>Документы</span><img src="img/icon-documents.png" alt="[documents]" /></a></li>
        --><li><a href="#bin"><span>Корзина</span><img src="img/icon-bin.png" alt="[bin]" /></a></li>
    </ul>
</div>

CSS

/* Dock */
#dock {
    display: block;
    margin: 30px auto;
    top: 0px;
    width: 100%;
    text-align: center;
    overflow: hidden;
}
#dock ul {
    margin: 0px -60px;
    padding: 0px;
    list-style: none;
    height: 198px;
    line-height: 198px;
    text-align: center;
    white-space: nowrap;
    display: inline-block;
    background: url("img/dock-middle.png") bottom left repeat-x;
}
#dock ul:before,
#dock ul:after {
    content: "";
    color: transparent;
    display: inline-block;
    width: 0px;
    padding-top: 60px;
    margin-top: -60px;
    vertical-align: bottom;
}
#dock ul:before {
    padding-left: 60px;
    margin-left: -60px;
    background: url("img/dock-left.png") bottom left repeat-x;
} 
#dock ul:after {
    padding-right: 60px;
    margin-right: -60px;
    background: url("img/dock-right.png") bottom right repeat-x;
}
/* Dock Icons */
#dock li {
    display: inline-block;
    vertical-align: bottom;
    margin: 0px;
    padding: 0px;
    position: relative;
    overflow: visible;
}
#dock li.seperator {
    background: url("img/dock-seperator.png") bottom left no-repeat;
    width: 20px;
    height: 158px;
    position: relative;
    vertical-align: bottom;
}
#dock li a {
    height: 153px;
    width: 48px;
    display: inline-block;
    text-align: center;
    position: relative;
    vertical-align: bottom;
    text-decoration: none;
    color: black;
    white-space: normal;
    letter-spacing: normal;    
    line-height: 1.3em;
    text-align: center;
    font-family: Arial;
    padding-top: 40px;
    margin-bottom: 5px;
    overflow: visible;
}
body.no_js #dock li a:hover {
    width: 128px !important;
}
#dock li a span {
    position: relative;
    line-height: 1.3em;
    display: none;
    text-align: center;
    font-weight: bold;
    font-size: 80%;
    padding: 4px 12px;
    background-color: #EEE;
    opacity: 0.4;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    margin: 0px auto;
    top: -40px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#dock li a:hover span {
    display: inline-block;
}
#dock li a:hover span:after {
    display: block;
    height: 9px;
    color: transparent;
    background: transparent url("img/span.png") center top no-repeat;
    position: absolute;
    content: "";
    text-align: center;
    margin: 0px;
    padding: 0px;
    width: 100%;
    margin-left: -16px;
}
#dock li a img {
    height: auto;
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 10px;
    text-align: center;
    border: 0px none;
    margin-bottom: 15px;
    box-reflect: below 1px gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1)));
    -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1)));
    -moz-box-reflect: below 1px -moz-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.1)));
}

Фикс для IE

<!--[if lte IE 7]>
<style>
    /* Inline block fix */
    #dock ul {
        display: inline;
        zoom: 1;
    }
 
    #dock li, #dock li a {
        display: inline;
        zoom: 1;
    }
 
    /* Image quality fix */
    img {
        -ms-interpolation-mode: bicubic;
    }
 
    #dock li a span {
        filter: alpha(opacity=40);
    }
</style>
<![endif]-->

JS

//library
function distance(x0, y0, x1, y1) {
    var xDiff = x1-x0;
    var yDiff = y1-y0;
    return Math.sqrt(xDiff*xDiff + yDiff*yDiff);
}
//start
var proximity = 180;
var iconSmall = 48, iconLarge = 128; //css also needs changing to compensate with size
var iconDiff = (iconLarge - iconSmall);
var mouseX, mouseY;
var dock = $("#dock");
var animating = false, redrawReady = false;
$(document.body).removeClass("no_js");
//below are methods for maintaining a constant 60fps redraw for the dock without flushing
$(document).bind("mousemove", function(e) {
    if (dock.is(":visible")) {
        mouseX = e.pageX;
        mouseY = e.pageY;
        redrawReady = true;
        registerConstantCheck();
    }
});
function registerConstantCheck() {
    if (!animating) {
        animating = true;
        window.setTimeout(callCheck, 15);
    }
}
function callCheck() {
    sizeDockIcons();
    animating = false;
    if (redrawReady) {
        redrawReady = false;
        registerConstantCheck();
    }
}
//do the maths and resize each icon
function sizeDockIcons() {
    dock.find("li").each(function() {
        //find the distance from the center of each icon
        var centerX = $(this).offset().left + ($(this).outerWidth()/2.0);
        var centerY = $(this).offset().top + ($(this).outerHeight()/2.0);
        var dist = distance(centerX, centerY, mouseX, mouseY);
        //determine the new sizes of the icons from the mouse distance from their centres
        var newSize =  (1 - Math.min(1, Math.max(0, dist/proximity))) * iconDiff + iconSmall;
        $(this).find("a").css({width: newSize});
    });
}
Скачать 1090Загрузок 115,78 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи