JavaScript를 사용하면 단일 또는 여러 그림을 연속적이고 원활하게 스크롤할 수 있습니다.

배경:

이미지의 연속 스크롤을 원한다면 js를 사용하므로 CSS 애니메이션, 전환 및 기타 관련 스타일을 추가하면 안 됩니다. 픽셀 단위로 이동하면 매우 매끄러워집니다. 전환 애니메이션을 추가하면 그림이 0으로 재설정되면 예상과 달리 뒤로 애니메이션 효과가 나타납니다.

추천: "javascript 고급 튜토리얼"

원리:

그림 스크롤링 원리는 그림 캐러셀 원리와 동일합니다. 복사를 통해 일련의 스크롤링에도 적용할 수 있습니다. 마지막 그림 또는 마지막 첫 번째 줄에 텍스트 묶음을 삽입하거나 첫 번째 그림을 복사하거나 끝에 텍스트 묶음을 삽입하여 원활한 연결을 달성하세요. 전제 조건은 다음과 같습니다. 1. 전환 애니메이션이 설정되지 않아야 합니다. 2 0으로 재설정하면 현재와 동일하며, 이미지의 위치에 따라 육안으로는 스크롤 높이가 변하지 않는 것으로 보입니다.

구현:

html은 주로 세 부분으로 구성됩니다.

1. 스크롤 이미지의 영역을 표시하는 데 사용되는 가장 바깥쪽 상자, Overflow: Hidden

2. 스크롤할 모든 그림이나 텍스트가 포함된 스크롤을 달성하기 위한 상자의 값

3. 그림이나 텍스트가 포함된 상자입니다.

코드:

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 === 'top' || this.direction === 'left'){
            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 + 'px';
                }
                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 + 'px';
                }
                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 + 'px';
                }
                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 + 'px';
                }
                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 + 'px';
                }
        }
    }
    stopRoll(){
        clearInterval(this.scrollTimer)
    }
    startRoll(){
        this.scrollTimer = setInterval(this.roll,this.time)
    }
}

위 내용은 JavaScript를 사용하면 단일 또는 여러 그림을 연속적이고 원활하게 스크롤할 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!