JS实用的带停顿的逐行文本循环滚动效果实例

让我来为您详细讲解“JS实用的带停顿的逐行文本循环滚动效果实例”的完整攻略。

简介

“带停顿的逐行文本循环滚动效果”是一种常见的滚动技术，可以使网页的文本内容呈现出逐行滚动的效果，并可通过设置停顿时间来实现滚动效果的调节。本文将介绍如何使用JavaScript实现这种效果。

实现步骤

HTML结构

首先，我们需要定义一个HTML结构用于承载逐行滚动的内容。下面是一个简单的HTML结构示例：

<div id="scroll-container">
    <ul>
        <li>第一行滚动内容</li>
        <li>第二行滚动内容</li>
        <li>第三行滚动内容</li>
    </ul>
</div>

在这个HTML结构中，我们使用了div元素来作为滚动容器，并将ul元素用于承载滚动的文本行。为了实现逐行滚动效果，每一行文本都应该是li元素。

CSS样式

接下来，我们需要为HTML结构添加相应的CSS样式，以实现逐行滚动效果。下面是一个样式示例：

#scroll-container {
    overflow: hidden;
}

#scroll-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#scroll-container ul li {
    margin: 0;
    padding: 0;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
}

在这个样式中，我们设置了滚动容器div元素的overflow属性为hidden，使得文本行的滚动效果只在容器内部显示。我们还为ul元素添加了一些默认样式，并将每一行文本的高度、行高和字体大小设置为了合理的值。需要注意的是，这里的高度和行高必须一致，否则会导致滚动效果出现问题。

JavaScript代码

接下来，我们开始编写JavaScript代码，以实现逐行滚动效果。下面是一个简单的JavaScript代码示例：

var scrollContainer = document.querySelector('#scroll-container');
var scrollContent = document.querySelector('#scroll-container ul');
var scrollItems = scrollContent.querySelectorAll('li');
var scrollSpeed = 1500; // 滚动速度（毫秒）
var pauseTime = 2000;   // 停顿时间（毫秒）

var currentItem = 0;
var scrollInterval = setInterval(function() {
    // 计算滚动的目标位置
    var targetPosition = scrollItems[currentItem].offsetTop - scrollContainer.offsetTop;
    // 执行滚动操作
    scroll(scrollContainer, targetPosition, scrollSpeed);
    // 切换到下一个文本行
    currentItem = (currentItem + 1) % scrollItems.length;
}, scrollSpeed + pauseTime);

function scroll(element, targetPosition, duration) {
    // 计算速度和时间
    var distance = targetPosition - element.scrollTop;
    var speed = distance / duration;
    var startTime = new Date().getTime();
    // 执行滚动操作
    var scrollInterval = setInterval(function() {
        var elapsedTime = new Date().getTime() - startTime;
        if (elapsedTime > duration) {
            clearInterval(scrollInterval);
            element.scrollTop = targetPosition;
        } else {
            element.scrollTop += speed * elapsedTime;
        }
    }, 15);
}

这段JavaScript代码的主要功能是对滚动容器中的文本行进行逐行滚动，并通过停顿时间来调节滚动效果。在代码中，我们首先使用querySelector和querySelectorAll方法找到需要操作的元素和文本行。然后，我们设置了逐行滚动的速度和停顿时间，以及存储了当前滚动到的文本行位置。最后，我们使用setInterval方法来定时执行滚动操作，并通过自定义的scroll函数来实现滚动操作的具体逻辑。在该函数中，我们计算出需要滚动的距离、速度和时间，并使用setInterval方法周期性地修改滚动容器的scrollTop属性，从而实现逐行滚动的效果。

示例说明

下面是两个示例，用于演示如何使用上述代码实现带停顿的逐行文本循环滚动效果。

示例一

下面是一个示例，演示如何使用上述代码实现带停顿的逐行文本循环滚动效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例一</title>
    <style>
        #scroll-container {
            overflow: hidden;
            width: 300px;
            height: 200px;
            border: 1px solid #000;
        }

        #scroll-container ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #scroll-container ul li {
            margin: 0;
            padding: 0;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <ul>
            <li>第一行滚动内容</li>
            <li>第二行滚动内容</li>
            <li>第三行滚动内容</li>
        </ul>
    </div>
    <script>
        var scrollContainer = document.querySelector('#scroll-container');
        var scrollContent = document.querySelector('#scroll-container ul');
        var scrollItems = scrollContent.querySelectorAll('li');
        var scrollSpeed = 1500; // 滚动速度（毫秒）
        var pauseTime = 2000;   // 停顿时间（毫秒）

        var currentItem = 0;
        var scrollInterval = setInterval(function() {
            // 计算滚动的目标位置
            var targetPosition = scrollItems[currentItem].offsetTop - scrollContainer.offsetTop;
            // 执行滚动操作
            scroll(scrollContainer, targetPosition, scrollSpeed);
            // 切换到下一个文本行
            currentItem = (currentItem + 1) % scrollItems.length;
        }, scrollSpeed + pauseTime);

        function scroll(element, targetPosition, duration) {
            // 计算速度和时间
            var distance = targetPosition - element.scrollTop;
            var speed = distance / duration;
            var startTime = new Date().getTime();
            // 执行滚动操作
            var scrollInterval = setInterval(function() {
                var elapsedTime = new Date().getTime() - startTime;
                if (elapsedTime > duration) {
                    clearInterval(scrollInterval);
                    element.scrollTop = targetPosition;
                } else {
                    element.scrollTop += speed * elapsedTime;
                }
            }, 15);
        }
    </script>
</body>
</html>

在这个示例中，我们首先定义了一个滚动容器的HTML结构，并使用CSS样式为其添加了一些默认样式。然后，我们使用JavaScript代码实现了逐行滚动和停顿效果，使得文本内容可以在容器内部进行滚动。需要注意的是，该示例中的文本行数量不仅限于三行，可以根据实际需求进行设置。

示例二

下面是另一个示例，演示如何使用上述代码实现带停顿的逐行文本循环滚动效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例二</title>
    <style>
        #scroll-container {
            overflow: hidden;
            width: 400px;
            height: 50px;
            border: 1px solid #000;
        }

        #scroll-container ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #scroll-container ul li {
            margin: 0;
            padding: 0;
            float: left;
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <ul>
            <li>第一行滚动内容</li>
            <li>第二行滚动内容</li>
            <li>第三行滚动内容</li>
            <li>第四行滚动内容</li>
            <li>第五行滚动内容</li>
        </ul>
    </div>
    <script>
        var scrollContainer = document.querySelector('#scroll-container');
        var scrollContent = document.querySelector('#scroll-container ul');
        var scrollItems = scrollContent.querySelectorAll('li');
        var scrollSpeed = 1500; // 滚动速度（毫秒）
        var pauseTime = 2000;   // 停顿时间（毫秒）

        var currentItem = 0;
        var scrollInterval = setInterval(function() {
            // 计算滚动的目标位置
            var targetPosition = scrollItems[currentItem].offsetLeft - scrollContainer.offsetLeft - (scrollContainer.offsetWidth - scrollItems[currentItem].offsetWidth) / 2;
            // 执行滚动操作
            scroll(scrollContainer, targetPosition, scrollSpeed);
            // 切换到下一个文本行
            currentItem = (currentItem + 1) % scrollItems.length;
        }, scrollSpeed + pauseTime);

        function scroll(element, targetPosition, duration) {
            // 计算速度和时间
            var distance = targetPosition - element.scrollLeft;
            var speed = distance / duration;
            var startTime = new Date().getTime();
            // 执行滚动操作
            var scrollInterval = setInterval(function() {
                var elapsedTime = new Date().getTime() - startTime;
                if (elapsedTime > duration) {
                    clearInterval(scrollInterval);
                    element.scrollLeft = targetPosition;
                } else {
                    element.scrollLeft += speed * elapsedTime;
                }
            }, 15);
        }
    </script>
</body>
</html>

在这个示例中，我们同样使用了逐行滚动和停顿的技术，但是针对不同的场景，对JavaScript代码进行了少许修改。具体来说，我们使用了float属性来控制文本行的位置，使得每一行文本都能够横向排列。需要注意的是，在这种布局方式下，计算滚动的目标位置的方法也有所变化，需要重新计算横向偏移量。