javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版

下面就来详细讲解“JavaScript文字上下间隔滚动的代码符合WEB标准脚本之家修正版”的完整攻略：

一、问题描述

有时候我们需要在网页中展示一些文字，但是为了让网页不显得太过单调，我们希望这些文字能够以一种滚动的形式进行展示，类似于一些新闻和通知栏目的效果。那么如何实现这样的滚动效果呢？下面就来介绍一种符合WEB标准的JavaScript文字上下间隔滚动的代码，即脚本之家修正版。

二、实现步骤

1. 在HTML文件中添加以下代码：

<div id="scrollBox" style="height:50px; overflow:hidden;">
    <ul id="scrollList">
        <li>这是第一条滚动信息</li>
        <li>这是第二条滚动信息</li>
        <li>这是第三条滚动信息</li>
        <li>这是第四条滚动信息</li>
    </ul>
</div>

1. 在JavaScript文件中添加以下代码：

function startmarquee(lh, speed, delay) {
    var scrollBox = document.getElementById("scrollBox");
    var scrollList = document.getElementById("scrollList");
    var iLineHeight = lh;
    var iScrollSpeed = speed;
    var iDelayTime = delay;
    var pauseState = false;
    scrollList.innerHTML += scrollList.innerHTML;
    scrollBox.scrollTop = 0;
    function scrollUp() {
        if (pauseState == false) {
            if (scrollBox.scrollTop % iLineHeight == 0) {
                clearInterval(scrollTimeId);
                setTimeout(function () {
                    scrollTimeId = setInterval(scrollUp, iScrollSpeed);
                }, iDelayTime)
            } else {
                scrollBox.scrollTop++;
                if (scrollBox.scrollTop >= scrollList.scrollHeight / 2) {
                    scrollBox.scrollTop = 0;
                }
            }
        }
    }
    var scrollTimeId = setInterval(scrollUp, iScrollSpeed);
    scrollBox.onmouseover = function () { pauseState = true; }
    scrollBox.onmouseout = function () { pauseState = false; }
}
window.onload = function () {
    startmarquee(20, 20, 2000);
}

1. 在CSS文件中添加以下代码：

ul li { line-height:20px; }

三、代码说明

以上代码实现了一个符合WEB标准的JavaScript文字上下间隔滚动的效果，具体实现步骤如下：

• 首先，在HTML文件中添加一个div容器以及一个ul列表，并将容器的高度设置为50px，overflow属性设置为hidden，使其只显示50px高度的部分，超出的部分被隐藏。

• 然后，在JavaScript文件中定义一个名为"startmarquee"的函数，参数包括行高、滚动速度和延迟时间。

• 在函数内部，首先获取前面定义的div容器和ul列表，并将行高、滚动速度和延迟时间赋值给三个变量。

• 接着，将ul列表的HTML内容复制一份添加到其后面，以实现无缝连续滚动的效果。

• 然后，定义一个名为"scrollUp"的函数，用于实现文字的上下滚动效果，在函数内部判断滚动条的位置，如果滚动条当前位置除以行高的余数为0，则停止当前滚动，等待延迟时间后再重新开始滚动，否则将滚动条向上滚动一行的高度。

• 定义一个名为"scrollTimeId"的变量，用于存储定时器的ID，并使用setInterval()函数来启动定时器，实现文字的不断滚动。

• 最后，在div容器上设置鼠标悬停和移开的事件，用于实现当鼠标悬停在文字上方时停止滚动，鼠标移开后恢复滚动的效果。

以上就是JavaScript文字上下间隔滚动的完整攻略，可以根据实际需求修改行高、滚动速度和延迟时间等参数，定制出符合自己网页风格的滚动效果。下面是两个示例：

四、示例说明

示例一

window.onload = function () {
    startmarquee(30, 10, 500);
}

这个示例将行高设置为30px，滚动速度为10ms，延迟时间为500ms，即每次滚动停留500ms后再次滚动。

示例二

window.onload = function () {
    startmarquee(25, 15, 1000);
}

这个示例将行高设置为25px，滚动速度为15ms，延迟时间为1000ms，即每次滚动停留1s后再次滚动。