Qu'est-ce qu'un bon morceau de JS ou JQuery pour un téléscripteur d'actualités à défilement horizontal
-
09-06-2019 - |
Question
Je recherche un peu de JQuery ou JS qui me permette de produire une liste de "news ticker" à défilement horizontal.
Le HTML produit doit également être conforme aux normes.
j'ai essayé liScroll mais cela a l'habitude de se casser (certains contenus finissent sur une deuxième ligne en début de scroll), notamment avec des listes plus longues.
j'ai aussi essayé ce téléscripteur d'actualités mais lorsqu'un DOCTYPE est inclus, le défilement sera saccadé plutôt que fluide à la fin de chaque cycle.
Toutes les suggestions sont appréciées.
Modifier
Ainsi, grâce à la suggestion de Matt Hinze, j'ai réalisé que je pouvais faire ce que je voulais faire avec JQuery Animate (j'ai besoin d'un défilement continu et non d'un défilement discret comme dans l'exemple).Cependant, j'ai rapidement rencontré des problèmes similaires à ceux que je rencontrais avec liScroll et après tout, j'ai réalisé qu'un problème CSS (comme toujours) en était responsable.
Solution:liScroll - changez la valeur par défaut 'var stripWidth = 0' en quelque chose comme 100, pour donner un peu d'espace et éviter un nouveau retour à la ligne.
La solution
Smooth Div Scroll peut également être utilisé comme téléscripteur d’actualités / téléscripteur boursier.Il peut s'arrêter en survolant ou en appuyant la souris et il peut boucler à l'infini si vous le souhaitez.
Voici l'exemple avec un téléscripteur en cours d'exécution.
Autres conseils
Voici 2 autres solutions qui semblent un peu plus simples à mettre en œuvre :
Une solution alternative serait également jQuery webticker;c'est très similaire à liscroll, mais résout le problème de l'arrêt du téléscripteur une fois la liste complète terminée ;tout en ajoutant également de nouvelles fonctionnalités sophistiquées telles que ;direction du mouvement;vitesse;et la possibilité d'utiliser plusieurs tickers par page.
Le bug de deuxième ligne apparaissant dans liscroll peut être "corrigé" en ajoutant un élément de liste contenant une entité espace insécable <li> </li>
à la fin de chaque liste ;)