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

Реклама

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

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

Комментарии

Счетчики

На сайте: 4
Прохожие: 4
Пользователей: 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 ...[ Скачали 67478 раз ]
Амфибии, Гайд по ассасина...[ Скачали 31847 раз ]
Амфибии, Гайд по шаманам.[ Скачали 30747 раз ]
cs 1.6 patch v48 full[ Скачали 29146 раз ]
Русский бот PW Alfa v 2.6[ Скачали 17282 раз ]
Огромный пак глюков и баг...[ Скачали 12838 раз ]
civilization 5 скачать бе...[ Скачали 12035 раз ]
PW MP5[ Скачали 11247 раз ]
MHS-Bot-PW 2.3 ботовод[ Скачали 10534 раз ]
Niko Bellic (нико белич) ...[ Скачали 10090 раз ]
Wallpapers Girls №1094[ Добавлен 24.07.2024 ]
Wallpapers Girls №1093[ Добавлен 22.07.2024 ]
Wallpapers Girls №1092[ Добавлен 17.07.2024 ]
Wallpapers Girls №1091[ Добавлен 17.07.2024 ]
Wallpapers Girls №1090[ Добавлен 14.07.2024 ]
Wallpapers Girls №1089[ Добавлен 13.07.2024 ]
Wallpapers Girls №1088[ Добавлен 13.07.2024 ]
Wallpapers Girls №1087[ Добавлен 12.07.2024 ]
Wallpapers Girls №1086[ Добавлен 09.07.2024 ]
Wallpapers Girls №1085[ Добавлен 08.07.2024 ]