[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Ucoz » Скрипты для ucoz » Подпрыгивающие кнопки на JQuery для UCOZ
Подпрыгивающие кнопки на JQuery для UCOZ
Macros
Дата: Вторник, 21.05.2013, 11:12 | Сообщение # 1
Оффлайн
Администраторы
Сообщений: 154
IP: Скрытная информация


Такой эффект легко сделать на CSS, но для кроссбраузерности воспользуемся JQuery. Подпрыгивающие кнопки на JQuery – это просто ссылки, плавно поднимающиеся при наведении. Можно сделать подъем резким, чтобы кнопки как будто реально подпрыгивали. Сначала создадим плагин, который будет отнимать margin-top в CSS при наведении. Код плагина будет коротким. Нужно учесть что ссылки, не имеющие в стиле атрибут display:block не подскакивают.

Установка:
1 шаг. Это ставим в Верхнюю часть сайта:
Код
<script type="text/javascript" src="http://dedicated.3dn.ru/uCoz/knopki_ucoz/1/jquery.min.js"></script>


2 шаг. Это ставим в нужное место:
Код
<ul class="links">   
   <li><a href="http://dedicated.3dn.ru/" class="up">Facebook</a></li>   
   <li><a href="http://dedicated.3dn.ru/" class="up">Twitter</a></li>   
   <li><a href="http://dedicated.3dn.ru/" class="up">Google Plus</a></li>   
   </ul>


3 шаг. Это ставим в Нижнюю часть сайта:
Код
<script type="text/javascript">   
   $.fn.upHover = function () {   
   return $(this).hover(   
   function(){$(this).stop().animate({marginTop: '-10px'}, 200)},   
   function(){$(this).stop().animate({marginTop: '0px'}, 200)}   
   );   
   }   

   $(".up").upHover();   
   </script>


4 шаг. Это ставим в CSS:
Код
.links {margin:0;padding:0;height:50px;line-height:50px;width:350px}   
   .links li {margin:0;padding:0;list-style: none; float:left;margin-right:20px}   
   .up {padding:20px;display:block}

.
Прикрепления: 2609817.png(3.8 Kb)


Форум » Ucoz » Скрипты для ucoz » Подпрыгивающие кнопки на JQuery для UCOZ
  • Страница 1 из 1
  • 1
Поиск: