PSD+ PhotoShop pamokos, apžvalgos, siuntiniai

Animuotas mygtukas (2 dalis)

Paskelbta 13. Bal, 2010 Autorius: PSD+ Kategorija: Web dizainas

Pirmoje dalyje parodžiau, kaip nusipieštį pačia mygtuko išvaizdą. Dabar koduosime XHTML, CSS ir jQuery pagalba.
Visų pirma pradėkime nuo CSS.

.otherbutton {
	clear: both;
	position:relative;
	display:block;
	height: 84px;
	width: 570px;
	background:url(button.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
.otherbutton span.hover {
	position: absolute;
	display: block;
	height: 84px;
	width: 570px;
	background: url(button.png) no-repeat;
	background-position: bottom;
}

Pirmas kodo laukas nurodo poziciją, kad bus naudojama tik paveikslėlio viršutinė dalis, t.y. normalus paveikslėlis. Antras blokas nurodo, kad naudosime paveikslėlio apačia, t.y. mygtuko išvaizda pasikeis ant jo užėjus pele.
Paveikėlį nurodome button.png

Tokio paprasto CSS kodo mums ir tereikia…
Svarbiausia dabar XHTML kodas, prie kurio pridedame JavaScript.
Kad veiktu JavaScript’as reikia turėti vieną papildomą failą. Jį gauti galite čia: jquery-1.3.2.min.js

Dabar koduojame html failą.
Kodas einantis tarp

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.otherbutton,.homebutton,.downloadbutton,.donatebutton').append('<span class="hover"></span>').each(function () {
	  		var $span = $('> span.hover', this).css('opacity', 0);
	  		$(this).hover(function () {
	    		$span.stop().fadeTo(500, 1);
	 		}, function () {
	   	$span.stop().fadeTo(500, 0);
	  		});
		});
	});
</script>

Esmė kodo, priskiriame css failą, js failą, bei programuojame mygtuko efektą(JavaScript).
Dabar belieka idėti nuorodą tarp , jai priskirti css klasę button ir turėtume gauti pilną animuotą mygtuką.

<a href="http://www.psdplius.lt" title="Photoshop pamokos" class="otherbutton"></a>

Viskas. Pavyzdį galite pažiūrėti čia.