js pour obtenir un défilement fluide des images-js tutoriel-php.cn

js pour obtenir un défilement fluide des images

王林

Libérer： 2020-05-11 09:15:50

avant

2230 Les gens l'ont consulté

js pour obtenir un défilement fluide des images

Principe de mise en œuvre :

Le principe de défilement d'images est le même que le principe du carrousel d'images. Il est également applicable à une série de défilements tels que le défilement de texte. la dernière image ou la dernière Insérez un tas de texte dans la première ligne, ou copiez la première image ou un tas de texte et insérez-la à la fin pour obtenir un épissage transparent.

Conditions préalables : 1. Aucune animation de transition ne doit être définie. 2. Lorsqu'elle est réinitialisée à 0, la position de l'image ne semble pas changer à l'œil nu par rapport à la hauteur vers laquelle elle a défilé.

Implémentation :

html contient principalement trois parties :

1 La zone la plus à l'extérieur est utilisée pour afficher la zone des images défilantes, overflow:hidden;

2. La zone de défilement modifie principalement la valeur de positionnement de la zone pour réaliser le défilement, qui contient toutes les images ou le texte à faire défiler

Code spécifique :

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

Copier après la connexion

Tutoriel recommandé : Tutoriel d'introduction js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!