recherche

Maison >interface Web >js tutoriel >Parfaitement compatible avec les graphiques Sina imitation jQuery et les effets de défilement intermittent du texte des principaux navigateurs_jquery

Parfaitement compatible avec les graphiques Sina imitation jQuery et les effets de défilement intermittent du texte des principaux navigateurs_jquery

WBOY
WBOYoriginal
2016-05-16 16:31:331382parcourir

1. Description de l'effet et de la fonction : la liste de textes d'images imitation Sina Weibo apparaît et disparaît en fondu et défile de haut en bas par intermittence

2. Le principe de mise en œuvre est de configurer d'abord le div pour afficher uniquement 4 images. Les images supplémentaires seront automatiquement masquées. Ensuite, ajoutez un événement d'animation aux images afin qu'elles puissent défiler et jouer. L'effet est joué par la balise li. Le contenu, les images et le texte à l'intérieur traitent chaque li dans son ensemble, lors du défilement, ils entrent dans le div et sont affichés lorsqu'ils quittent finalement le div, ils sont masqués. effet d'animation pour fonctionner complètement.

3. Environnement opérationnel

Il peut être implémenté dans IE6 IE7 IE8 et supérieur dans les navigateurs Firefox et Google Chrome

4. Créez un nouveau fichier pour le package compressé de toutes les images, puis décompressez le package et placez-le dans un dossier. Le package compressé des images peut être vu et téléchargé en bas de la page. il n'est pas nécessaire de modifier le nom du dossier car il a déjà été écrit et le chemin dans html5 correspond à

5. Lors de l'enregistrement du fichier html créé, changez le type d'encodage en (UTF-8 avec signature) afin que certains caractères chinois puissent être affichés normalement. Changez le type d'enregistrement (T) en (tous les fichiers (*.*) ), mettez les dossiers html5 et images décompressées dans le même dossier

6.Code

Copier le code Le code est le suivant :










jquery imite Sina Weibo image texte liste écart défilement fondu entrant et sortant défilement






怎么样，效果相当不错吧。

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：Utilisez node.js pour créer le front-end et le backend du website_node.jsArticle suivant：Utilisez node.js pour créer le front-end et le backend du website_node.js

Articles Liés

Voir plus