Ausführliche Erklärung von CSS3, um nahtloses Scrollen in 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 Verwendung von CSS3 zur Erzielung eines nahtlosen Scrollens in Endlosschleife vorgestellt. Ich hoffe, dass er für alle hilfreich ist.

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

2. Verwenden Sie setInterval, um im übergeordneten Container von A nach oben zu scrollen ;

3. Wenn der Aufwärtsscrollabstand L genau der Höhe von A entspricht (L==A.height()), L=0, starten Sie den Scrollvorgang erneut und führen Sie eine Endlosschleife durch.

Klonen Sie eine Kopie der Daten und platzieren Sie sie hinten, sodass, wenn A sich nach oben bewegt, hinten Daten vorhanden sind, um die durchgesickerten 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 erforderlich ist kann manuell ausgelöst werden und kann nicht auf unbestimmte Zeit ausgeführt werden. Eine Animation kann dieses Problem lösen.

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

css:

@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);
    }
}
.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;
}

html:

<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>

Der Laufeffekt ist wie folgt folgt:

2. Wenn die Daten unsicher sind

Im obigen Unterabschnitt sind die Daten dead, height Es ist auch in CSS3 geschrieben. 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:

// 设置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);
}

Führen Sie nach der Berechnung der Höhe der Originaldaten A die Methode addKeyFrames aus und fügen Sie CSS-Attribute zum Kopf hinzu. Dann überschreibt die Zeile hier die vorherige Einstellung Höhe der Daten A:

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

3. Horizontales Scrollen

Alles oben erklärt. Scrollen Sie nach oben , dann sind links, rechts und unten einfacher zu verstehen. Ändern Sie einfach den Wert in transform in den entsprechenden Wert.

4. Zusammenfassung

Die Verwendung von CSS zur Anzeige von Animationen lässt die Seite flüssiger erscheinen. Wenn dies mit CSS erreicht werden kann, können Sie versuchen, CSS zu verwenden, um dies zu erreichen

Verwandte Empfehlungen:

Javascript, um einen nahtlosen Scrolleffekt des Karussells zu erzielen

Detaillierte Erläuterung des Beispielcodes des nahtlosen JavaScript-Scrolleffekts

Der von JavaScript implementierte nahtlose Scrolleffekt nach links und rechts

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung von CSS3, um nahtloses Scrollen in Endlosschleife zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!