js realizes continuous and seamless scrolling of single or multiple pictures

Background:

If you want to achieve continuous rolling of pictures, since js is used, you should never add css animation, transition and other related styles. If you want to smooth the rolling, you can move one pixel by one pixel, which is very smooth. If you add transition animation, when the picture is reset to 0, it will have a backward animation effect, which is inconsistent with the expectation.

Principle:

The rolling principle of pictures is the same as the rolling principle of pictures. It is also applicable to a series of rolling, such as text rolling. Seamless splicing can be realized by copying the last picture or the last pile of words to insert the first line, or copying the first picture or a pile of words to insert at the end, provided that: 1. There must be no transition animation, 2. When reset to 0, the height that has been scrolled to is the same as the current height The degree does not change to the position of the picture.

realization:

html mainly consists of three parts:

1. The outermost box, which is used to show the area of the scroll chart, overflow:hidden;

2. The scrolling box, which mainly changes the positioning value of the box to realize scrolling, contains all pictures or text to be scrolled

3. A box containing pictures or text.

 

code:

class Roll {
    constructor(opts) {
        this.elem = opts.elem; // The image contains the
        this.elemBox = opts.elemBox; //Picture display area element, in order to obtain the height of the display area
        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;
        // If you scroll up or to the left, decrease 1 each time, scroll down or to the right, increase 1 each time
        if(this.direction === 'top' || this.direction === 'left'){
            this.speed = -1;
        }else{
            this.speed = 1;
        }
    }
    roll(){
        switch (this.direction) {
            case "top":
                // If the scroll box's top Set to 0 if the value exceeds the height of the element
                if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
                    this.elemBox.style.top = 0;
                }else{
                    this.elemBox.style.top = this.elemBox.offsetTop + this.speed + 'px';
                }
                break;
            case "bottom":
                // If the scroll box's bottom Set to 0 if the value exceeds the height of the element
                if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){
                    this.elemBox.style.bottom = 0;
                }else{
                    this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + 'px';
                }
                break;
            case "left":
                // If the scroll box's left Set to 0 if the height of the element is exceeded
                if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){
                    this.elemBox.style.left = 0;
                }else{
                    this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + 'px';
                }
                break;
            case "right":
                // If the scroll box's right Set to 0 if the height of the element is exceeded
                if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){
                    this.elemBox.style.right = 0;
                }else{
                    this.elemBox.style.right = this.elemBox.offsetRight + this.speed + 'px';
                }
                break;
            default:
                // Scroll up by default, if the top Set to 0 if the height of the element is exceeded
                if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
                    this.elemBox.style.top = 0;
                }else{
                    this.elemBox.style.top = this.elemBox.offsetTop + speed + 'px';
                }
        }
    }
    stopRoll(){
        clearInterval(this.scrollTimer)
    }
    startRoll(){
        this.scrollTimer = setInterval(this.roll,this.time)
    }
}

 

Reference link:

https://www.teakki.com/p/590beb7be8136dfc5f21770d

Tags: Javascript

Posted on Fri, 08 May 2020 10:23:27 -0400 by GOKU