JS-Methode zum kontinuierlichen Aufwärtsscrollen einzeiliger text_javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt die JS-Methode zum Realisieren eines kontinuierlichen Aufwärtsscrollens einer einzelnen Textzeile. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Vor ein paar Tagen habe ich einem Freund geholfen, einen JS-Effekt zu schreiben, damit eine einzelne Textzeile ununterbrochen nach oben scrollen kann. Jetzt teile ich ihn mit den Webern, die ihn brauchen. Schauen wir uns zunächst den HTML- und CSS-Code an:

CSS:

Code kopieren Der Code lautet wie folgt:

.wrap{padding:10px;border:1px #ccc fest; Breite: 500 Pixel; Rand: 20 Pixel automatisch; .roll-wrap{height:130px;overflow:hidden;}

HTML:

Code kopieren Der Code lautet wie folgt:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

Das Prinzip dieses Animationseffekts besteht darin, zuerst die UL um die Höhe der LI nach oben zu scrollen und dann die erste LI in der UL am Ende der UL zu platzieren. Zu diesem Zeitpunkt wird die ursprüngliche zweite LI zur ersten LI in der UL ul. und wiederholen Sie dann die obige Aktion, um ein unterbrechungsfreies Scrollen zu erreichen.


JS (jQuery)-Code:

Code kopieren

Der Code lautet wie folgt:

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

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