JavaScript ermöglicht das kontinuierliche und nahtlose Scrollen einzelner oder mehrerer Bilder-js-Tutorial-php.cn

JavaScript ermöglicht das kontinuierliche und nahtlose Scrollen einzelner oder mehrerer Bilder

藏色散人

Freigeben： 2020-05-10 14:18:50

nach vorne

2637 Leute haben es durchsucht

Hintergrund:

Wenn Sie ein kontinuierliches Scrollen von Bildern erreichen möchten, fügen Sie niemals CSS hinzu, da Sie js verwenden Animation, Übergang und andere verwandte Stile. Wenn Sie den Bildlauf glätten möchten, können Sie ihn Pixel für Pixel verschieben. Wenn Sie eine Übergangsanimation hinzufügen, erfolgt ein Rückwärtsgang Animationseffekt und Erwartungen wurden nicht erfüllt.

Empfohlen: „Javascript Advanced Tutorial“

Prinzip:

Das Bildlaufprinzip ist Das Gleiche gilt für das Bild. Das Karussellprinzip gilt auch für eine Reihe von Bildlaufvorgängen, z. B. für das Scrollen von Text. Dies kann erreicht werden, indem das letzte Bild oder der letzte Textblock kopiert und in die erste Zeile eingefügt wird oder indem das erste Bild oder das erste Bild kopiert wird Eine Menge Text und Einfügen am Ende. Voraussetzungen: 1. Es darf keine Übergangsanimation eingestellt sein. 2. Wenn sie auf 0 zurückgesetzt wird, scheint sich die Position des Bildes, zu dem derzeit gescrollt wurde, nicht geändert zu haben für das bloße Auge.

Implementierung:

html enthält hauptsächlich drei Teile:

1. Das äußerste Feld wird zur Anzeige des Bildlaufbereichs verwendet, overflow:hidden ;

2. Ein Bildlauffeld, das hauptsächlich den Positionierungswert des Feldes ändert, um das Scrollen zu ermöglichen.

Code:

class Roll {
    constructor(opts) {
        this.elem = opts.elem; // 图片包含滚动长度的元素的
        this.elemBox = opts.elemBox; //图片展示区域元素，为了获取展示区域的高度
        this.direction = opts.direction;
        this.time = opts.time;
        this.init();
        this.roll = this.roll.bind(this)
        this.startRoll = this.startRoll.bind(this)
        this.stopRoll = this.stopRoll.bind(this)
    }
    init(){
        this.elemHeight = this.elem.offsetHeight;
        this.elemHtml = this.elem.innerHTML;
        this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;
        this.speed;
        // 如果向上滚或者向左滚动每次减1，向下滚或者向右滚动每次加1
        if(this.direction === &#39;top&#39; || this.direction === &#39;left&#39;){
            this.speed = -1;
        }else{
            this.speed = 1;
        }
    }
    roll(){
        switch (this.direction) {
            case "top":
                // 如果滚动的盒子的top值超出元素的高度，则置为0
                if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
                    this.elemBox.style.top = 0;
                }else{
                    this.elemBox.style.top = this.elemBox.offsetTop + this.speed + &#39;px&#39;;
                }
                break;
            case "bottom":
                // 如果滚动的盒子的bottom值超出元素的高度，则置为0
                if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){
                    this.elemBox.style.bottom = 0;
                }else{
                    this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + &#39;px&#39;;
                }
                break;
            case "left":
                // 如果滚动的盒子的left超出元素的高度，则置为0
                if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){
                    this.elemBox.style.left = 0;
                }else{
                    this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + &#39;px&#39;;
                }
                break;
            case "right":
                // 如果滚动的盒子的right超出元素的高度，则置为0
                if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){
                    this.elemBox.style.right = 0;
                }else{
                    this.elemBox.style.right = this.elemBox.offsetRight + this.speed + &#39;px&#39;;
                }
                break;
            default:
                // 默认向上滚动，如果滚动的盒子的top超出元素的高度，则置为0
                if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
                    this.elemBox.style.top = 0;
                }else{
                    this.elemBox.style.top = this.elemBox.offsetTop + speed + &#39;px&#39;;
                }
        }
    }
    stopRoll(){
        clearInterval(this.scrollTimer)
    }
    startRoll(){
        this.scrollTimer = setInterval(this.roll,this.time)
    }
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonJavaScript ermöglicht das kontinuierliche und nahtlose Scrollen einzelner oder mehrerer Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!