13 janvier 2010
Plugin jQuery : Feature List, animer vos listes
Un plugin jQuery comme je les aimes : Feature List vous permet d’animer et de faire défiler les élements d’une liste.
Trois options permettent de configurer ce plugin :
- start_item – pour définir sur quel élement de la liste démarre l’animation
- pause_on_hover – pour bloquer l’animation au survol d’un élement
- transition_interval – la durée de la transition
A partir de cette source HTML :
<ul id="tabs">
<li>
<a href="javascript:;">
<img src="services.png" />
<h3>Services</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="programming.png" />
<h3>Programming</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="applications.png" />
<h3>Applications</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
</ul>
<ul id="output">
<li>
<img src="sample1.jpg" />
<a href="#">See project details</a>
</li>
<li>
<img src="sample2.jpg" />
<a href="#">See project details</a>
</li>
<li>
<img src="sample3.jpg" />
<a href="#">See project details</a>
</li>
</ul>
Et de ce code javascript :
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);
Vous obtenez visuellement :

Démo et téléchargement sur le site de jQueryGlobe.
Lien :
Aucun commentaire
Soyez le premier à commenter cet article !
Déposez un commentaire