All-For-Kompa.RU

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

Всё для компа

chat

Видео дня

Популярное

Реклама

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

Партнёры



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

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

Авторизация

Реклама

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

Опрос

что лучше?

1. Mozilla Firefox
2. Opera
3. IE

Реклама

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

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

Комментарии

Счетчики

На сайте: 8
Прохожие: 8
Пользователей: 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 ...[ Скачали 67710 раз ]
Амфибии, Гайд по ассасина...[ Скачали 32130 раз ]
Амфибии, Гайд по шаманам.[ Скачали 30961 раз ]
cs 1.6 patch v48 full[ Скачали 29437 раз ]
Русский бот PW Alfa v 2.6[ Скачали 17627 раз ]
Огромный пак глюков и баг...[ Скачали 13090 раз ]
civilization 5 скачать бе...[ Скачали 12189 раз ]
PW MP5[ Скачали 11486 раз ]
MHS-Bot-PW 2.3 ботовод[ Скачали 10852 раз ]
Niko Bellic (нико белич) ...[ Скачали 10249 раз ]
Wallpapers Mix №1905[ Добавлен 11.01.2025 ]
Wallpapers Mix №1904[ Добавлен 07.01.2025 ]
Wallpapers Mix №1903[ Добавлен 07.01.2025 ]
Wallpapers Mix №1902[ Добавлен 04.01.2025 ]
Wallpapers Mix №1901[ Добавлен 27.12.2024 ]
Wallpapers Mix №1900[ Добавлен 25.12.2024 ]
Wallpapers Mix №1899[ Добавлен 24.12.2024 ]
Wallpapers Mix №1898[ Добавлен 23.12.2024 ]
Wallpapers Mix №1897[ Добавлен 23.12.2024 ]
Wallpapers Mix №1896[ Добавлен 21.12.2024 ]