Beispiele zur Erläuterung von CSS3, um nahtloses Scrollen mit Endlosschleife zu erreichen

Manchmal müssen in einem bestimmten Modul der Seite einige Nachrichten in einer Endlosschleife gescrollt werden. Was ist also die Idee, wenn wir js verwenden, um einen nahtlosen Bildlauf zu erreichen (z. B. scrollt unser Modul nach oben)? In diesem Artikel wird hauptsächlich der Beispielcode für die Realisierung eines nahtlosen Endlosschleifen-Scrollens mit CSS3 vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Klonen Sie A und platzieren Sie eine identische Kopie der Daten B hinter den Originaldaten A.

2. Verwenden Sie setInterval, um den übergeordneten Container von A nach oben zu scrollen . Wenn der Aufwärtsscrollabstand L genau der Höhe von A entspricht (L==A.height()), L=0, beginnt der Scrollvorgang erneut und die Schleife ist endlos.

Klonen Sie eine Kopie der Daten und platzieren Sie sie hinten, sodass bei einer Bewegung von A nach oben Daten hinten vorhanden sind, um die Lücken zu füllen. Wenn sich B an den oberen Rand des sichtbaren Bereichs bewegt und A sich gerade aus dem sichtbaren Bereich bewegt, wird der Container auf 0 zurückgesetzt. Der Benutzer nimmt dies nicht wahr und denkt, es sei immer noch das erste Datenelement in B. Dann scrollen Sie weiter nach oben.

1. Verwenden Sie CSS3 zur Implementierung.

Wenn Sie CSS3-Attribute zur Implementierung verwenden möchten, muss es sich um eine Animation handeln, da der Übergang manuell ausgelöst werden muss und nicht unbegrenzt ausgeführt werden kann genau richtig kann dieses Problem lösen.

Wenn die Daten fest codiert sind, können wir manuell eine Kopie der Daten kopieren und diese hinterlegen und dann die Höhe der Originaldaten in CSS schreiben. Die Implementierungsidee ist dieselbe wie oben:

CSS-Stil:

HTML-Format:

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -307px, 0);
        transform: translate3d(0, -307px, 0);
        display: none;
    }
}
.list{
    width: 300px;
    border: 1px solid #999;
    margin: 20px auto;
    position: relative;
    height: 200px;
    overflow: hidden;
}

.list .rowup{
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}

2. Wenn die Daten unsicher sind

<p class="list">
    <p class="cc rowup">
        <p class="item">1- 121233fffffr国家认可更健康进口价格困扰</p>
        <p class="item">2- 3123233</p>
        <p class="item">3- 个人口结构俄跨入国际科技馆客人感觉</p>
        <p class="item">4- ggrgerg</p>
        <p class="item">5- fvdgdv</p>
        <p class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</p>
        <p class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</p>
        <p class="item">8- 德国网红致信默克尔</p>
        <p class="item">9- 国资委原</p>
        <p class="item">1- 121233fffffr国家认可更健康进口价格困扰</p>
        <p class="item">2- 3123233</p>
        <p class="item">3- 个人口结构俄跨入国际科技馆客人感觉</p>
        <p class="item">4- ggrgerg</p>
        <p class="item">5- fvdgdv</p>
        <p class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</p>
        <p class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</p>
        <p class="item">8- 德国网红致信默克尔</p>
        <p class="item">9- 国资委原</p>
    </p>
</p>

Im obigen Abschnitt sind die Daten dead , die Höhe ist auch in CSS3 fest codiert. Aber was sollen wir tun, wenn die Anzahl der von der Schnittstelle erhaltenen Daten ungewiss ist und auch die Länge jedes Datenelements ungewiss ist?

Hier müssen wir die Höhe basierend auf den Daten neu berechnen und in CSS schreiben. Da es jedoch schwieriger ist, Keyframes zu ändern, verwenden wir das Überschreiben, um die Daten in Keyframes neu zu berechnen:

Führen Sie nach der Berechnung der Höhe der Originaldaten A die Methode addKeyFrames aus und fügen Sie das CSS-Attribut zum Kopf hinzu. Dann überschreibt das Rowup hier die vorherige Einstellung. Der Abstand jedes Bildlaufs entspricht der Höhe der Daten A:

// 设置keyframes属性
function addKeyFrames(y){
    var style = document.createElement('style');
    style.type = 'text/css';
    var keyFrames = '\
    @-webkit-keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }\
    @keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }';
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    document.getElementsByTagName('head')[0].appendChild(style);
}

3. Horizontales Scrollen

function init(){
    var data = '塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。羌管悠悠霜满地，人不寐，将军白发征夫泪。', //样例数据
        data_len = data.length,
        len = parseInt(Math.random()*6)+6, // 数据的长度
        html = '<p class="ss">';
    
    for(var i=0; i<len; i++){
        var start = parseInt( Math.random()*(data_len-20) ),
            s = parseInt( Math.random()*data_len );
        html += &#39;<p class="item"v>'+i+'- '+data.substr(start, s)+'</p>';
    }
    html += '</p>';
    document.querySelector('.list .cc').innerHTML = html+html; // 复制一份数据
    var height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度
    addKeyFrames( '-'+height+'px' ); // 设置keyframes
    document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup
}
init();

Die obigen Erklärungen beziehen sich ausschließlich auf das Scrollen nach links, rechts und nach unten. Ändern Sie einfach den Wert in transform auf den entsprechenden Wert. .

4. Zusammenfassung

Die Verwendung von CSS zur Anzeige von Animationen sorgt dafür, dass die Seite flüssiger erscheint. Wenn es mit CSS implementiert werden kann, können Sie versuchen, es so weit wie möglich mit CSS zu implementieren.

Verwandte Empfehlungen:

Detaillierte Erläuterung der nahtlosen Bildlaufkomponente von Vue

Javascript realisiert den nahtlosen Bildlaufeffekt von Karussellbildern

Javascript-Beispielcode, um einen nahtlosen Scrolleffekt mehrerer Bilder nach links und rechts zu erzielen

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung von CSS3, um nahtloses Scrollen mit Endlosschleife zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!