В сходна статия "Направа на динамичен бутон" чрез CSS разгледах начин как се постига sprite-изображение в графичен редактор Photoshop.
Позволете да повторим опита. За целта съм подготвил изображение, ползвайки ресурс от deviantart.com.
Постигаме CSS Бутон
Пишем макет.
Това е хиперлинк елемент а, заобиколен от елемент span с клас button. Прави впечатление, че няма име на атрибута. То умишлено е пропуснато, което ще спести свойство text-indent в CSS-файла.
html-код
<span class="button"><a href="#"></a></span>
Добавяме стил.
Изображението в случая е с размери 199px на 112px. Неговата половина по височина определя значението на селектор height, познато от предните статии. Що се касае упоменатия text-indent неговото значение в повечето случай е -9999рх. По този начин ще скрие надписа на бутона, който би трябвало да напишем на място на текст <a href="#"></a>текст</span>. Но CSS Trics съветват друго.
Накратко, надписът отива зад възможностите на монитора и посетителят не го вижда. На негово място стои фоново изображение, виждано от посетителя, докато ботовете спокойно индексират въпросния текст. По този начин се спомага SEO, но този начин е добре дошъл и за спамърите, и на свои ред Google реагира в обратна посока.
Следва познато позициониране в зависимост от положението на курсора върху бутона. И при псевдо-селектор hover, то е -56рх. Значение, равно половината на изображението. Съответно, не забравяйте да изчислите за вашия бъдещ бутон. До тук това е достатъчно за обикновен бутон с CSS.
css-код
.button {
display:block;
width:199px;
height:56px;
background:url(button.png) no-repeat 0 -56px;
}
.button a {
display:block;
width:199px;
height:56px;
background:url(button.png) no-repeat 0 0;
}
.button a:hover {
background-position:0 -56px;
}
Постигаме jQuery Бутон
Включваме библиотека jQuery. За целта между тагове <head> и </head> добавяме следния код
html код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="javascript.js"></script>
Дойде ред и на jQuery, с чиято помощ ще постигнем анимация на нашия бутон - плавно преливане на картинката от горната част към долна и обратно, в зависимост от положението на курсора върху бутона. Нашия код ще бъде постигнат от .ready() method.
Първото нещо е да премахнем :hover стила, защото ще пречи на анимацията. Toва е описано от 1-ви до 3-ти ред в java-script кода. Няма място за притеснения, ако посетителя е изключил изпълнението на JavaScript в своя браузър. Бутонът ще бъде управляван от CSS.
Следва метод .hover(), който ще следи положението на курсора и според зададеното време (500) ще се изпълнява анимацията.
java-script код
$(document).ready(function(){
$('span.button a')
.css({ 'backgroundPosition': '0 0' })
.hover(
function(){
$(this).stop()
.animate({
'opacity': 0
}, 500);
},
function(){
$(this).stop()
.animate({
'opacity': 1
}, 500);
}
);
});
Пълен код на бутона
пълен код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>jQuery Анимиран Бутон</title>
<style type="text/css">
.button {
display:block;
width:199px;
height:56px;
background:url(button.png) no-repeat 0 -56px;
}
.button a {
display:block;
width:199px;
height:56px;
background:url(button.png) no-repeat 0 0;
}
.button a:hover {
background-position:0 -56px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('span.button a')
.css({ 'backgroundPosition': '0 0' })
.hover(
function(){
$(this).stop()
.animate({
'opacity': 0
}, 500);
},
function(){
$(this).stop()
.animate({
'opacity': 1
}, 500);
}
);
});
</script>
</head>
<body>
<span class="button"><a href="#"></a></span>
</body>
</html>
Кодът е валидиран от The W3C Markup Validation Service.
Извор: Six Revision
Демо
| CSS Бутон | jQuery Бутон |
10.12.2010 profruit
0 Response to "Анимиран jQuery бутон"
Публикуване на коментар