js实现内容滚动效果

爱被打了一巴掌 2022-06-13 03:51 638阅读 0赞

首先说下实现内容滚动效果的思路：在一块区域内实现内容滚动效果，要求内容轮播，那么如何实现轮播呢？我们将原内容复制一份放置其后面，当原内容滚动完成（即父层scrollTop等于原内容区高度时），我们将父层scrollTop设置为0，此时又从原内容开始滚动。如果浏览者想看内容时，但内容一直再滚动怎么办呢？我们可以通过设置onmouseover事件来控制，当用户把鼠标悬停至内容区时，停止滚动；当鼠标移开时，继续滚动。

以下是代码部分：

html代码：
    <div class="scroll" id="scroll">
            <div id="inner1">
                <p>1好好学习天天向上!</p>
                <p>2好好学习天天向上!</p>
                <p>3好好学习天天向上!</p>
                <p>4好好学习天天向上!</p>
                <p>5好好学习天天向上!</p>
                <p>6好好学习天天向上!</p>
                <p>7好好学习天天向上!</p>
                <p>8好好学习天天向上!</p>
            </div>
            <div id="inner2"></div>
        </div>

css样式：
            ul,li,p{ margin:0;padding:0;list-style: none}
            body{ padding:20px;}
            .scroll{ line-height:28px; border:2px dashed #666; padding:0 20px; height:112px; overflow:hidden; background-color:#f1f1f1; }

js代码：
    function srcoll(){ 
            var _scroll = document.getElementById("scroll"),
                _inner1 = document.getElementById("inner1"),
                _inner2 = document.getElementById("inner2"),
                speed = 20;
            _inner2.innerHTML = _inner1.innerHTML;
            function marquee(){ 
                if(_inner1.offsetHeight<=_scroll.scrollTop){
                    _scroll.scrollTop = 0
                }else{
                    _scroll.scrollTop++;
                }
            }
            var interval = setInterval(marquee,speed);
            _scroll.onmouseover = function(){ 
                clearInterval(interval);
            }
            _scroll.onmouseout = function(){ 
                interval = setInterval(marquee,speed);
            }
        }
        srcoll()