単行の上方向連続スクロールを実現するJSメソッド text_javascriptスキル

この記事の例では、単一行のテキストの上方向への連続スクロールを実現する JS メソッドを説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

数日前、私は友人が 1 行のテキストを途切れることなく上にスクロールするための JS エフェクトを作成するのを手伝いました。今、それを必要とするウェーバーと共有しています。まず HTML と CSS コードを見てみましょう:

CSS:

コードをコピー コードは次のとおりです:

.wrap{padding:10px;border:1px #ccc実線; 幅:500px;マージン:20px 自動;}
.roll-wrap{高さ:130px;オーバーフロー:非表示;}

HTML:

コードをコピー コードは次のとおりです:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

このアニメーション効果の原理は、まず ul を li の高さだけ上にスクロールし、次に ul の最初の li を ul の最後に配置することです。このとき、元の 2 番目の li が最初の li になります。 ul. を実行し、上記の操作を繰り返して、中断のないスクロールを実現します。


JS (jQuery) コード:

コードをコピー

コードは次のとおりです:

関数scrollTxt(){
    var コントロール={}、
        値={}、
        t1=200, /*播放アニメーション画の時間*/
        t2=2000, /*放送時間间間隔*/
        シ;
    controls.rollWrap=$("#roll-wrap");
    controls.rollWrapUl=controls.rollWrap.children();
    controls.rollWrapLIs=controls.rollWrapUl.children();
    value.liNums=controls.rollWrapLIs.length;
    value.liHeight=controls.rollWrapLIs.eq(0).height();
    値.ulHeight=controls.rollWrap.height();
    this.init=function(){
        autoPlay();
        stopPlay();
    }
    /*滚動*/
    関数 play(){
        controls.rollWrapUl.animate({"マージントップ" : "-" 値.liHeight}, t1, function(){
            $(this).css("margin-top" , "0").children().eq(0).appendTo($(this));
        });
    }
    /*自動滚動*/
    関数 autoPlay(){
        /*すべてのli巻きの高さおよび.roll-wrapの高さより大きい場合*/
        if(values.liHeight*values.liNums > value.ulHeight){
            si=setInterval(function(){
                play();
            },t2);
        }
    }
    /*ネズミ标经过ul時間暂停止滚動*/
    関数pausePlay(){
        controls.rollWrapUl.on({
            "マウスエンター":function(){
                clearInterval(si);
            }、
            "mouseleave":function(){
                autoPlay();
            }
        });
    }
}
newscrollTxt().init();

ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。