Меню с увеличением картинок при наведении - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Меню для сайта uCoz » Меню с увеличением картинок при наведении

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Меню с увеличением картинок при наведении

Меню с эффектом увеличения пунктов изображений




При наведении мышкой на картинку к которой прикреплена ссылка меню картинка будет увеличиваться выделяясь из остальных. Можно добавить или убрать картинок по своему усмотрению, размер тоже можно изменить, размер картинок меняется в скрипте:
maxWidth: 80 - Размер картинки при наведении на неё.
itemWidth: 30 - Размер до наведения мышкой.
Устанавливать меню можно в верхнюю часть сайта, ну или в другое место сайта поддерживающее HTML добавление.Меню работает с применением библиотеки jQuery, она есть у Вас на сайте если он в системе юКоз. Для эксперимента кода установки в редакторе скопируйте в него скрипт библиотеки.




Установите скрипт там где хотите видеть меню


<link href="http://delaisait.ucoz.ru/css/menu/dock.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://delaisait.ucoz.ru/js/menu/interface.js"></script>
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_2.gif" alt="Второй" />
<span>Второй</span>
</a>
<a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_3.gif" alt="Третий" />
<span>Третий</span>
</a>
  <a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_4.gif" alt="Четвёртый" />
<span>Четвёртый</span>
</a>
  <a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_5.gif" alt="Пятый" />
<span>Пятый</span>
</a>
  <a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_6.gif" alt="Шестой" />
<span>Шестой</span>
</a>
  <a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_7.gif" alt="Седьмой" />
<span>Седьмой</span>
</a>
  <a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_8.gif" alt="Восьмой" />
<span>Восьмой</span>
</a>
  <a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_9.gif" alt="Девятый" />
<span>Девятый</span>
</a><a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_10.gif" alt="Десятый" />
<span>Десятый</span>
</a>
<a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_11.gif" alt="Одинадцатый" />
<span>Одинадцатый</span>
</a>
<a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_12.gif" alt="Двенадцатый" />
<span>Двенадцатый</span>
</a>
<a class="dock-item" href="#">
<img src="http://delaisait.ucoz.ru/img/smail/1/smiles_13.gif" alt="Тринадцатый" />
<span>Тринадцатый</span>
</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 80,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 30,
proximity: 50,
halign : 'center'
}
)
}
);
</script>



Для проверки кода меню в редакторе добавьте в него скрипт jQuery


<script type="text/javascript" src="http://s36.ucoz.net/src/jquery-1.7.2.js"></script>


Меню в подключенном состоянии

Проверьте код установки в редакторе

Вставьте код для установки + скрипт jQuery в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 2063 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: Для сайта, с картинками, меню

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]