Подпрыгивающие кнопки на JQuery
Такой эффект легко сделать на CSS, но для кроссбраузерности воспользуемся JQuery. Подпрыгивающие кнопки на JQuery – это просто ссылки, плавно поднимающиеся при наведении. Можно сделать подъем резким, чтобы кнопки как будто реально подпрыгивали. Сначала создадим плагин, который будет отнимать margin-top в CSS при наведении. Код плагина будет коротким. Нужно учесть что ссылки, не имеющие в стиле атрибут display:block не подскакивают.
Подключаем JQuery (в секцию HEAD)
Код HTML
Код JavaScript
Код CSS
Подключаем 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>
<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>
$.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}
.links li {margin:0;padding:0;list-style: none; float:left;margin-right:20px}
.up {padding:20px;display:block}
Создать сайт в uKit
Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (7)
0
0
0
0
0
0
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.