Méthode JS pour réaliser un défilement continu vers le haut des compétences text_javascript sur une seule ligne

L'exemple de cet article décrit la méthode JS permettant de réaliser un défilement continu vers le haut d'une seule ligne de texte. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Il y a quelques jours, j'ai aidé un ami à écrire un effet JS pour qu'une seule ligne de texte défile vers le haut sans interruption. Maintenant, je le partage avec les webers qui en ont besoin. Regardons d'abord le code HTML et CSS :

CSS :

Copier le code Le code est le suivant :

.wrap{padding:10px;border:1px #ccc solide ; largeur : 500 px; marge : 20 px auto ;🎜> .roll-wrap{hauteur:130px;overflow:hidden;}

HTML :

Copier le code Le code est le suivant :

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

Le principe de cet effet d'animation est de faire d'abord défiler l'ul vers le haut de la hauteur du li, puis de placer le premier li dans l'ul à la fin de l'ul. À ce moment, le deuxième li d'origine devient le premier li dans le. ul. , puis répétez l'action ci-dessus pour obtenir un défilement ininterrompu.


Code JS (jQuery) :

Copier le code

Le code est le suivant :

fonction scrollTxt(){
    var contrôles={},
        valeurs={},
        t1=200, /*播放动画的时间*/
        t2=2000, /*播放时间间隔*/
        si;
    contrôles.rollWrap=$("#roll-wrap");
    controles.rollWrapUl=controls.rollWrap.children();
    controles.rollWrapLIs=controls.rollWrapUl.children();
    valeurs.liNums=controls.rollWrapLIs.length;
    valeurs.liHeight=controls.rollWrapLIs.eq(0).height();
    valeurs.ulHeight=controls.rollWrap.height();
    this.init=fonction(){
        lecture automatique();
        pausePlay();
    >
    /*滚动*/
    fonction jouer(){
        controles.rollWrapUl.animate({"margin-top" : "-"values.liHeight}, t1, function(){
            $(this).css("margin-top" , "0").children().eq(0).appendTo($(this));
        });
    >
    /*自动滚动*/
    fonction autoPlay(){
        /*如果所有li标签的高度和大于.roll-wrap的高度则滚动*/
        if(values.liHeight*values.liNums >values.ulHeight){
            si=setInterval(function(){
                jouer();
            },t2);
        >
    >
    /*鼠标经过ul时暂停滚动*/
    fonction pausePlay(){
        contrôles.rollWrapUl.on({
            "mouseenter":fonction(){
                clearInterval(si);
            },
            "mouseleave":fonction(){
                lecture automatique();
            >
        });
    >
>
nouveau scrollTxt().init();

希望本文所述对大家的javascript程序设计有所帮助。