CSS / JQuery alimenté par le texte de défilement latéral sur hover
J'ai un compte twitter sur un site que j'ai exécuter. Cependant, elle est coupée sur les petits écrans. J'ai une barre assez haut pour 1 ligne de texte dans laquelle j'ai le dernier tweet. Je veux le tweet à ellipsize ou fade out à la fin si c'est trop long. Mais sur le vol stationnaire, je veux que le texte de glisser lentement vers la gauche, exposant ainsi la partie cachée.
Cet effet est utilisé sur l'iPod classic lorsque vous mettez en surbrillance une chanson qui a un titre qui est plus large que l'écran. (J'espère que vous comprenez ce que je vais faire.)
Je suis juste curieux de voir comment je pourrais mettre en place quelque chose comme cela? Comment puis-je forcer le texte à rester sur une seule ligne?
source d'informationauteur appi2012
Vous devez vous connecter pour publier un commentaire.
Voici une manière assez simple de le faire. D'abord, mettre en place un div contenant votre texte long:
Vous pouvez utiliser un peu de css pour gérer automatiquement la troncature et les points de suspension:
Si vous puis de déterminer la maternelle, untruncated largeur du contenu, vous pouvez utiliser du jQuery
.animate()
pour déplacer ce contenu à une vitesse constante, même si vous ne connaissez pas la longueur du texte jusqu'à l'exécution (comme ce serait le cas avec un compte twitter). Voici un peu mécanique de l'obtention de la mesure:Enfin, un peu d'animation:
Quelle que soit la longueur du texte, vous obtiendrez une vitesse constante d'environ une seconde par 100 pixels (ajuster comme vous le souhaitez). La réinitialisation ou le rembobinage de contenu sur mouseleave est laissée en exercice. Cette approche a des naïfs bits, mais peut vous donner quelques idées.
Voici un exemple de travail: http://jsfiddle.net/redler/zdvyj/
Enfin, voici ma participation: http://jsfiddle.net/sdleihssirhc/AYYQe/3/
Des trucs Cool:
text-overflow:ellipsis
au lieu d'ajouter un quelconque des éléments du DOMIl y a quelques plugins qui font cela (Remy Sharp: http://remysharp.com/demo/marquee.html par exemple), mais si vous avez été la construction à partir de zéro:
L'élément le défilement doit avoir "white-space: nowrap;" (pour le maintenir sur une ligne), "position:absolute" (pour permettre de faire défiler à gauche et à droite) et enveloppé dans une position relative d'un élément qui a "overflow:hidden" (pour le faire apparaître comme seule la largeur que vous voulez).
À l'aide de jQuery, vous pouvez utiliser .animate() pour déplacer le défilement de l'élément de gauche à droite sur le hover événement
Steffen Rusitschka a écrit un script jQuery, RUZEE.Points de suspensionpour ce faire.
Vous pouvez donner un coup d'oeil à jRollingNews
Utiliser le générateur de code pour personnaliser les barres et de prévisualiser le résultat.
Avertissement: je l'ai fait.