欢迎来到资源库(www.zyku.net)

JavaScript

当前位置:首页 > 网页制作 > JavaScript

javascript实现单张或多张图片持续无缝滚动

时间:2020-05-10|栏目:JavaScript|点击:|我要投稿

背景:

想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符。

原理:

图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接,前提: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)

    }

}

原文链接:https://www.php.cn/js-tutorial-448891.html

(资源库 www.zyku.net)

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

沪ICP备15050984号-12