Interactioneaza cu Cycle – jQuery

21 aprilie
Learn jQuery
1 comentariu

Marcaje , , ,

Probabil ca toata lumea a vazut cel putin o data un carusel Cycle. Este cea mai simpla metoda de a genera un banner rotator/carusel de imagini intr-o pagina web. Acesta este generat de framework-ul jQuery. In cele ce urmeaza am sa va prezint o modificare ce il va face mult mai eficient.

Primul lucru pe care trebuie sa il faceti cand lucrati cu jQuery este sa inserati in partea de <head> script-ul propriu-zis si modulul Cycle.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>

Le puteti downloada de aici si aici.

Acum, dupa ce am aranjat toate lucrurile, vom efectua urmatoarea operatiune in partea de <body> a documentului.

<div id="slideshow">
<div id="unu"><img src="1.jpg" alt="" /></div>
<div id="doi"><img src="2.jpg" alt="" /></div>
<div id="trei"><img src="3.jpg" alt="" /></div>
</div>


Astfel am creat un div numit slideshow in care am introdus alte 3 divuri ce contin fiecare cate o imagine diferita. In CSS va ocupati de pozitionari, border-uri etc.

Acum sa ne jucam putin cu acest slideshow. Revenim in partea de <head>.

<script type="text/javascript">
$(document).ready(
     function() {
	$('#slideshow').hover(
            function() { $('#slideshow').cycle("pause"); },
	    function() { $('#slideshow').cycle("resume"); }
    );
});
</script>

Ce am facut… in momentul in care documentul s-a incarcat, efectuam o functie. Functia spune asa: cand cursorul este peste div-ul numit slideshow, atunci aplicam atributul de pause intregului carusel; cand cursorul paraseste suprafata div-ului, schimbam atributul in resume. Astfel obtinem un efect foarte placut pentru o mini-galerie: slideshow-ul se opreste/porneste in functie de pozitia mouse-ului.

C’ya next time!



Ti-a placut articolul Interactioneaza cu Cycle – jQuery?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

1 comentariu pentru Interactioneaza cu Cycle – jQuery

Discuta articolul Interactioneaza cu Cycle – jQuery



Contul tau

Categorii

Mozku Network

Ne gasesti si pe Facebook

Articole noi

Fisiere populare

  • Proiect Atestat Informatica Visual FoxPro (439)
  • Twitter Patterns (202)
  • Flash Newsletter (126)
  • hitTest Flash (99)
  • Baza de date auto revizuita (98)

Marcaje articole

actionscript 2 AJAX android animatii Flash animatii jQuery as2 atestat informatica atestat informatica intensiv background css baza de date in flash baze de date c++ start compatibilitate browsere conditional comments css efecte jQuery flash flash and php functii javascript html invata c invata Flash invata Javascript invata jQuery invata pascal invata php invata sql invata visual fox Java javascript jQuery layout html learn Learn CSS Learn HTML math in flash numar cifre c++ Pascal php functions php queries structuri suma suma cifrelor c++ tabel baza de date vector