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});
});
}Ссылки
