All-For-Kompa.RU

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

Всё для компа

chat

Видео дня

Популярное

Реклама

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

Партнёры



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

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

Авторизация

Реклама

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

Опрос

Откуда удобнее качать?

1. depositfiles.com
2. letitbit.net
3. другой
4. Rapidshare.de
5. ifolder.ru
6. uploading.com
7. filespace.ru
8. Oxyshare.com
9. upload2.ne
10. quickdump.com
11. Megaupload.com
12. Hyperupload.com
13. Turboupload.com
14. Mytempdir.com
15. getfile.biz

Реклама

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

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

Комментарии

Счетчики

На сайте: 11
Прохожие: 11
Пользователей: 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 ...[ Скачали 68091 раз ]
Амфибии, Гайд по ассасина...[ Скачали 32413 раз ]
Амфибии, Гайд по шаманам.[ Скачали 31348 раз ]
cs 1.6 patch v48 full[ Скачали 29703 раз ]
Русский бот PW Alfa v 2.6[ Скачали 17904 раз ]
Огромный пак глюков и баг...[ Скачали 13353 раз ]
civilization 5 скачать бе...[ Скачали 12410 раз ]
PW MP5[ Скачали 11734 раз ]
MHS-Bot-PW 2.3 ботовод[ Скачали 11152 раз ]
Niko Bellic (нико белич) ...[ Скачали 10477 раз ]
Wallpapers Girls №1200[ Добавлен 02.11.2025 ]
Wallpapers Girls №1199[ Добавлен 26.10.2025 ]
Wallpapers Mix №1980[ Добавлен 24.10.2025 ]
Wallpapers Mix №1979[ Добавлен 19.10.2025 ]
Wallpapers Mix №1978[ Добавлен 17.10.2025 ]
Wallpapers Mix №1977[ Добавлен 12.10.2025 ]
Wallpapers Mix №1976[ Добавлен 11.10.2025 ]
Wallpapers Mix №1975[ Добавлен 08.10.2025 ]
Wallpapers Mix №1974[ Добавлен 05.10.2025 ]
Wallpapers Mix №1973[ Добавлен 04.10.2025 ]