Такой эффект легко сделать на CSS, но для кроссбраузерности воспользуемся JQuery. Подпрыгивающие кнопки на JQuery – это просто ссылки, плавно поднимающиеся при наведении. Можно сделать подъем резким, чтобы кнопки как будто реально подпрыгивали. Сначала создадим плагин, который будет отнимать margin-top в CSS при наведении. Код плагина будет коротким. Нужно учесть что ссылки, не имеющие в стиле атрибут display:block не подскакивают.
Установка:
1 шаг. Это ставим в Верхнюю часть сайта:
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
2 шаг. Это ставим в нужное место:
Code
<ul class="links">
<li><a href="/" class="up">Facebook</a></li>
<li><a href="/" class="up">Twitter</a></li>
<li><a href="/" class="up">Google Plus</a></li>
</ul>
<li><a href="/" class="up">Facebook</a></li>
<li><a href="/" class="up">Twitter</a></li>
<li><a href="/" class="up">Google Plus</a></li>
</ul>
3 шаг. Это ставим в Нижнюю часть сайта:
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>
4 шаг. Это ставим в 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}
Категория:
Кнопки для uCoz
Просмотров:
880
