Подпрыгивающие кнопки на JQuery - Кнопки - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Кнопки


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

Подключаем JQuery (в секцию HEAD)
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Код HTML
Code
<ul class="links"> 
  <li><a href="index.html" class="up">Facebook</a></li> 
  <li><a href="index.html" class="up">Twitter</a></li> 
  <li><a href="index.html" class="up">Google Plus</a></li> 
</ul>

Код JavaScript
Code
<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>

Код CSS
Code
.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}

Важно!

При копировании материала указывать ссылку на источник.

- 413
- 04-Декабря-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта