Punta de Choros

27 декември 2009

На 2009г й оставаха 120ч съществуване. От календара падна поредния лист с дата 27 декември и към 10.30ч сутринта ме събуди звън от телефона.

Инсталация на Microsoft шрифтове в Ubuntu 16.04

14 януари 2017

нсталация на Microsoft шрифтове в Ubuntu се поражда от идеята браузърите в различните системи, да показват еднакво текстовото съдържанието на интернет страниците.

Ubuntu 16.04 инсталация на USB disk on Key

19 ноември 2016

Арсеналът ми от мобилни компютри съдържа Fujitsu Lifebook AH530. Това е бюджетна машина от 2011г на Intel Core i5-480M процесор и 4GB DDR3 RAM памет.

gparted

Paragon ExtFS for Windows

30 юли 2016

ExtFS for Windows е утилита на Paragon Software разработена през 2013г. Тя представлява решение, предоставящо пълен достъп на четене и на запис до раздели ...

msvcr100.dll is missing Windows 10

04 октомври 2016

Майк Патерсън от Plixer, компания по компютърната сигурност, публикува доклад , че Windows 10 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.


В статията "Как да направя CSS бутон" разгледахме два начина за постигане на такъв, нужен за нашия сайт. Втория начин постигнахме, чрез sprite-изображение, което превеждаме през три състояния, за да добием визуален ефект.

В сходна статия "Направа на динамичен бутон" чрез CSS разгледах начин как се постига sprite-изображение в графичен редактор Photoshop.

Позволете да повторим опита. За целта съм подготвил изображение, ползвайки ресурс от deviantart.com.

profruit jquery image

Постигаме 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);
   }
 );
});

Пълен код на бутона

За тези, които са в танка с заварен люк, кодът е този. Копирайте го в текстови редактор. Получения файл съхранете с разширение .html и произволно име. Сложете файла в една папка/директория с sprite-изображението(button.png).

пълен код
<!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 бутон"

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: Ubuntu, WEB, Photoshop, Фотография, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога