All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок

Всё для компа

chat

Видео дня

Популярное

Реклама

Хочешь помочь проекту? Установи наш баннер!

Партнёры



Развлекательный портал по игре Dota 2. У нас вы первым узнаете о последних игровых новостях, сможете почитать интересные статьи и гайды, посмотреть стримы популярных комментаторов и многое другое.

Про-софт - сайт професионального софта. Ето сайт не только софта но также игровых дополнений, музыки, фильмов, игр для ПК а также читов для ПК игр. Постоянное обновление материалов и каждый день появляется чтото новенькое!

Авторизация


Реклама

Хочешь помочь проекту? Установи наш баннер!

Опрос

Если не спиться

1. лечь спать а не сидеть за компом до 6 утра
2. утопиться
3. обкуриться
4. воды напиться
5. задолбиться
6. обмочиться
7. выпрямиться

Реклама

Хочешь помочь проекту? Установи наш баннер!

Популярные тэги

Комментарии

Счетчики

На сайте: 1
Прохожие: 1
Пользователей: 0
Статус:

Счётчик тИЦ и PR Rambler's Top100
HTML и DHTML [2] JavaScript [5]
Mootools [2] JQuery [22]
Разное [2] CSS [4]
PHP [1]
АвторАвтор: leonP4 | ДатаДата: 03.10.2010 |Голосов: 0


Интересный плагин на jQuery, напоминает всеми нами известное меню Windows vista - Rocket dock.

Легким наведением курсора увеличивается ближняя картинка, и последовательно близ лежащие ей.

Установка.

Пред /head ставим:

Code
<script type="text/javascript" src="/js/interface.js"></script>  
<script type="text/javascript"> $(document).ready( function() { $('#dock').Fisheye( { maxWidth: 50, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 70, proximity: 80, halign : 'center' } ) } );</script>

Это устанавливаем в CSS:

Code
/* dock - top */
.dock {
  position: relative;  
  height: 50px;  
  text-align: center;
}
.dock-container {
  position: absolute;
  height: 50px;
  padding-left: 20px;
}
a.dock-item {
  display: block;
  width: 40px;
  color: #000;
  position: absolute;
  top: 0px;
  text-align: center;
  text-decoration: none;
  font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
  border: none;  
  margin: 5px 10px 0px;  
  width: 100%;  
}
.dock-item span {
  display: none;  
  padding-left: 20px;
}

/* dock2 - bottom */
#dock2 {
  width: 100%;
  bottom: 0px;
  position: absolute;
  left: 0px;
}
.dock-container2 {
  position: absolute;
  height: 50px;
  padding-left: 20px;
}
a.dock-item2 {
  display: block;  
  font: bold 12px Arial, Helvetica, sans-serif;
  width: 40px;  
  color: #000;  
  bottom: 0px;  
  position: absolute;
  text-align: center;
  text-decoration: none;
}
.dock-item2 span {
  display: none;
  padding-left: 20px;
}
.dock-item2 img {
  border: none;  
  margin: 5px 10px 0px;  
  width: 100%;  
}

Это ставим там где нужно вывести меню:

Code
<div id="dock" class="dock">  
<div style="left: 109.5px; width: 560px;" class="dock-container">  

<a style="width: 70px; left: 0px;" href="http://www.all-for-kompa.ru/news/el_matador_2006_rus/2010-08-13-1302" class="dock-item"><img ilo-full-src="http://all-for-kompa.3dn.ru/_nw/13/s53584914.jpg" alt="El Matador (2006/RUS)" src="http://all-for-kompa.3dn.ru/_nw/13/s53584914.jpg">  
<span style="display: none;">El Matador (2006/RUS)</span></a>  

<a style="width: 70px; left: 0px;" href="http://www.all-for-kompa.ru/news/2009-07-02-538" class="dock-item"><img ilo-full-src="http://www.all-for-kompa.3dn.ru/_nw/5/54576.jpg" alt="Command and Conquer: Generals Contra 006" src="http://www.all-for-kompa.3dn.ru/_nw/5/54576.jpg">  
<span style="display: none;">Command and Conquer: Generals Contra 006</span></a>  

<a style="width: 70px; left: 0px;" href="http://www.all-for-kompa.ru/news/ultimate_spider_man/2010-01-26-769" class="dock-item"><img ilo-full-src="http://all-for-kompa.3dn.ru/_nw/7/98673535.jpg" alt="Ultimate Spider-Man" src="http://all-for-kompa.3dn.ru/_nw/7/98673535.jpg">  
<span style="display: none;">Ultimate Spider-Man</span></a>  

</div>  
</div>

вот и все, наслаждаемся красивым видом и не забываем залить прикрепленные файлы в папку js.

Материал подготовил leonP4.


Теги к статье:

| : Dock, jQuery, Rocket, слайдер, увеличение
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Популярные файлыНовые файлы
Call of Duty 5: World at ...[ Скачали 67375 раз ]
Амфибии, Гайд по ассасина...[ Скачали 31758 раз ]
Амфибии, Гайд по шаманам.[ Скачали 30663 раз ]
cs 1.6 patch v48 full[ Скачали 29045 раз ]
Русский бот PW Alfa v 2.6[ Скачали 17192 раз ]
Огромный пак глюков и баг...[ Скачали 12743 раз ]
civilization 5 скачать бе...[ Скачали 11941 раз ]
PW MP5[ Скачали 11147 раз ]
MHS-Bot-PW 2.3 ботовод[ Скачали 10403 раз ]
Niko Bellic (нико белич) ...[ Скачали 10005 раз ]
Inkbound (2024/En/MULTI/R...[ Добавлен 13.04.2024 ]
The Planet Crafter (2024/...[ Добавлен 13.04.2024 ]
My Life: Farm Vet (2024/R...[ Добавлен 12.04.2024 ]
Headquarters: World War I...[ Добавлен 12.04.2024 ]
Ereban: Shadow Legacy (20...[ Добавлен 11.04.2024 ]
Broken Roads (2024/Ru/En/...[ Добавлен 11.04.2024 ]
Wallpapers Girls №1042[ Добавлен 11.04.2024 ]
Children of the Sun (2024...[ Добавлен 09.04.2024 ]
Wallpapers Girls №1041[ Добавлен 09.04.2024 ]
Wallpapers Girls №1040[ Добавлен 08.04.2024 ]