Kaedah JS untuk merealisasikan penatalan berterusan ke atas bagi kemahiran text_javascript satu baris

Contoh dalam artikel ini menerangkan kaedah JS untuk merealisasikan tatal ke atas tanpa gangguan bagi satu baris teks. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Beberapa hari lalu, saya telah membantu rakan menulis kesan JS yang membenarkan satu baris teks untuk menatal ke atas tanpa gangguan Sekarang saya berkongsi dengan weber yang memerlukannya. Mari lihat kod HTML dan CSS dahulu:

CSS:

Salin kod Kod adalah seperti berikut:

.wrap{padding:10px;border:1px #ccc pepejal; lebar :500px;margin:20px auto;}
.roll-wrap{height:130px;overflow:hidden;}

HTML:

Salin kod Kod adalah seperti berikut:

                                                                                                                                                                                                                                                                                                                                                                                           ...                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

Prinsip kesan animasi ini adalah untuk mula-mula menatal ul ke atas mengikut ketinggian li, dan kemudian meletakkan li pertama dalam ul pada penghujung ul Pada masa ini, li kedua asal menjadi li pertama dalam ul. , dan kemudian ulangi tindakan di atas, untuk mencapai penatalan tanpa gangguan.


Kod JS (jQuery):

Salin kod

Kod adalah seperti berikut:

fungsi tatalTxt(){
    var controls={},
        nilai={},
        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();
    }
    /*滚动*/
    main fungsi(){
        controls.rollWrapUl.animate({"margin-top" : "-" values.liHeight}, t1, function(){
            $(this).css("margin-top" , "0").children().eq(0).appendTo($(this));
        });
    }
    /*自动滚动*/
    fungsi autoPlay(){
        /*如果所有li标签的高度和大于.roll-wrap的高度则滚动*/
        if(values.liHeight*values.liNums > values.ulHeight){
            si=setInterval(function(){
                main();
            },t2);
        }
    }
    /*鼠标经过ul时暂停滚动*/
    fungsi pausePlay(){
        controls.rollWrapUl.on({
            "masuk tetikus":function(){
                clearInterval(si);
            },
            "mouseleave":function(){
                autoPlay();
            }
        });
    }
}
new scrollTxt().init();

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