recherche

Maison >interface Web >js tutoriel >jQuery implémente le défilement automatique des listes pour afficher les actualités dans une boucle_jquery

jQuery implémente le défilement automatique des listes pour afficher les actualités dans une boucle_jquery

WBOY
WBOYoriginal
2016-05-16 16:38:541977parcourir

Les actualités (annonces, événements, images, etc.) doivent être affichées de manière circulaire dans une petite zone de la page, et le défilement doit s'arrêter et s'afficher lorsque la souris survole, et le défilement doit continuer après sortie.

Rendu :

Voici les trucs secs

html :

Copier le code Le code est le suivant :

css :
Copier le code Le code est le suivant :

ui,li {
style de liste : aucun ;
>
#actualité{
hauteur : 75px ;
débordement : caché ;
>

La clé est le fichier js :
Copier le code Le code est le suivant :

$(fonction() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, fonction() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");

fonction scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight "px"
}, 600, fonction() {
$self.css({
margeHaut : 0
}).find("li:first").appendTo($self);
})
>
})


L'essentiel est de comprendre et d'utiliser les méthodes hover, setInterval, clearInterval, animate et l'attribut marginTop (marginLeft, top, left, etc.). Il est à noter que si vous n'ajoutez pas .trigger("mouseleave"), lorsque la page Web est initialisée, la liste ne défile pas et appendTo peut déplacer des éléments directement, c'est tout.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery charge les données de manière asynchrone et ajoute des événements example_jqueryArticle suivant：jQuery charge les données de manière asynchrone et ajoute des événements example_jquery

Articles Liés

Voir plus