Trucuri jQuery Scrolling

 

     Scrolling-ul animat in jQuery poate fi folosit pentru a crea caruseluri de imagini sau pentru a simplifica un design prin adaugarea mai multor informatii intr-un spatiu mai redus.

     Mai jos puteti vedea un exemplu al plugin-ului jQuery numit Scrollable (apasati pe link pentru a vedea pagina originara cu un demo al acesteia). Exista foarte multe pluginuri si tutoriale pe web despre cum pot fi create continuturi "scrollable", plugin-ul Scrollable fiind doar unul dintre acestea.

     Pentru a putea anunta jQuery ca trebuie sa execute actiunea de "scroll", avem nevoie de o portiune de cod in pagina web pentru a executa parcurgerea in sus sau in jos.


 

Scrolling

 

<div class="ScrollTarget">
<p>Dupa ce butonul de scroll va fi apasat, juery va anima pagina pana in acest punct</p>
</div>


     Apoi, putem folosi orice element HTML ca declansator pentru functia numita scroll(), precum o imagine, sau un buton de input pentru a spune browserului sa parcurga catre div-ul de mai sus cand este apasat.

     Exemplu pentru un buton de input:


<input onclick="scoll();" type="button" value="Scroll" />

     Exemplu pentru o imagine:


<img onclick="scoll();" src="images/scroll.jpg" alt="Scroll" />

     Acesta este codul pentru functia scroll():


function scroll(){
$('html, body').animate({
scrollTop: $(".ScrollTarget").offset().top
}, 2000);
}

     Dezavantajul acestei tehnici este ca foloseste o proprietate "onclick" ceea ce este o practica gresita, daca esti hotarat sa urmezi principiile stricte JAvaScript.Asa ca, se poate modifica markup-ul elementului in asemenea mod incat sa aiba valorea unei clase, astfel:


<input class="scrollTrigger" type="button" value="Scroll" />

     Apoi modificati functia scroll() de mai sus, inlocuind-o cu urmatorul cod:


$('.scrollTrigger').click(function(){
$('html, body').animate({
scrollTop: $(".ScrollTarget").offset().top
}, 2000);
});


Alex B.

0Comentarii la "Trucuri jQuery Scrolling"

Adauga Comentariu

Mesaj

Trimite