JavaScript滚动框字幕替换
从XHTML验证的角度来看，在Web页面上放置选取框是一个噩梦，因此，这是一个精巧的函数，它将产生与垂直滚动选取框相同的效果，并通过XHTML验证，并且完全由JavaScript和CSS构建。
垂直滚动
采取以下HTML代码。不用担心阅读。div标签中仅包含7个p标签（其中2个充当间隔符）。
Lorem ipsum dolor sit amet consectetur enim proident in elit est. Culpa sit ad aliquip laboris sit ad tempor in dolore proident. Ut ut deserunt laboris ut exercitation sit consectetur nisi sunt incididunt. Nisi non et qui adipisicing labore tempor consequat anim id dolore. Veniam velit aliquip laborum. cillum dolor amet sed dolore laborum. in. Magna deserunt veniam anim ut deserunt est ut ut.
Aute enim quis duis exercitation magna cupidatat ullamco duis voluptate ullamco. Ad eu est in commodo occaecat mollit officia sit elit excepteur. Elit sint duis excepteur reprehenderit consequat cupidatat quis esse occaecat elit. Officia tempor laborum. dolore dolore nulla ea adipisicing pariatur irure deserunt. Enim ullamco mollit ut eu lorem elit ex sit cillum pariatur. Laboris laboris tempor ex ad officia eu.
Elit est laboris nisi nostrud incididunt exercitation qui in excepteur eiusmod. Exercitation eu occaecat mollit amet esse enim consectetur non veniam occaecat. Ea occaecat commodo dolore sunt ullamco veniam incididunt aliqua labore minim. Velit et amet nulla consectetur enim eiusmod enim ut in cupidatat. Velit do excepteur dolor sed nostrud cillum ad ea veniam sint. Culpa ex sed esse exercitation sed do in lorem ea proident. Ullamco labore.
Eiusmod id quis exercitation officia sit aliquip enim in in aliquip. Lorem adipisicing officia elit pariatur proident ut irure aute id dolor. Tempor cillum non dolore lorem enim in velit et pariatur consequat. Excepteur ad ex fugiat est esse dolore consectetur ut ut dolor. Mollit consequat culpa laborum. aliquip sunt nostrud dolore consequat cillum labore. Dolor officia lorem do sunt nostrud aliqua velit voluptate.
Eiusmod id quis exercitation officia sit aliquip enim in in aliquip. Lorem adipisicing officia elit pariatur proident ut irure aute id dolor. Tempor cillum non dolore lorem enim in velit et pariatur consequat. Excepteur ad ex fugiat est esse dolore consectetur ut ut dolor. Mollit consequat culpa laborum. aliquip sunt nostrud dolore consequat cillum labore. Dolor officia lorem do sunt nostrud aliqua velit voluptate.
以下样式表将使div看起来像一个小盒子，并允许JavaScript将其变成字幕。还在此处设置spacerp标签，使其与div的大小相同。
这是JavaScript。
您还需要在body标签上设置onload事件，以便init()在页面加载时运行该函数。该init()函数将div的溢出设置为隐藏，以便在其上不显示滚动条。必须在页面加载后执行此操作，因为在主样式表中进行设置时似乎没有执行任何操作。init()然后，该函数调用该scrollFromBottom()函数，该函数只是将文本向页面上方移动一点，然后调用自身以重复该过程。一旦文本的底部超过了div的顶部，将重置高度并重复该过程。
您需要以下内容：
在选取框的开始端结束处。这将创建一个缓冲区，使选取框看起来更自然，不仅要考虑到分隔符类来确定元素的高度。您还需要确保为隔离标签指定特定的高度。例如，在上面的代码中，我将spacer标签的高度设置为150px。然后，您必须确保选取框的scrollHeight减去spacer标签的高度。看一下JavaScript的第12行。
div标签也是鼠标悬停和鼠标悬停时的两个事件。这些功能可以阻止用户在其上移动鼠标时滚动文本。可以将其忽略或保留，具体取决于您希望选取框执行的操作，但是它复制了HTML选取框的原始功能。
水平滚动
水平滚动略有不同。它使用了主要包含div的scrollLeft属性，但是需要进行一些初始设置来确定需要多少滚动。为了使div内的文本滚动，您需要使用一个内部div，该div包含一组p标签，其中两个是spacer标签。内部div用于将p标签保留在一行中。这是用于水平滚动选框的HTML代码。
Lorem ipsum dolor sit amet consectetur enim proident in elit est. Culpa sit ad aliquip laboris sit ad tempor in dolore proident. Ut ut deserunt laboris ut exercitation sit consectetur nisi sunt incididunt. Nisi non et qui adipisicing labore tempor consequat anim id dolore. Veniam velit aliquip laborum. cillum dolor amet sed dolore laborum. in. Magna deserunt veniam anim ut deserunt est ut ut.
Aute enim quis duis exercitation magna cupidatat ullamco duis voluptate ullamco. Ad eu est in commodo occaecat mollit officia sit elit excepteur. Elit sint duis excepteur reprehenderit consequat cupidatat quis esse occaecat elit. Officia tempor laborum. dolore dolore nulla ea adipisicing pariatur irure deserunt. Enim ullamco mollit ut eu lorem elit ex sit cillum pariatur. Laboris laboris tempor ex ad officia eu.
接下来，您需要设置一些样式，以使p标签显示在一行中。
最后，这里是所需的JavaScript。它的工作方式与垂直滚动条相同，不同之处在于在开始滚动之前已经确定了内部div标签所需的宽度。该脚本采用了内部div中的所有p标签，并对每个标签的总宽度进行了总计。然后，循环功能仅需减去marquee_replacementdiv的宽度即可。
调试
如果您对选取框为何无法使用的原因感到困惑，则可以执行以下操作。
将此HTML行添加到页面中的任何位置，最好靠近放置选取框的位置。
将以下JavaScript行添加到字幕脚本中。您可能希望将其放在函数声明之后，以scrollFromBottom()进行垂直滚动和scrollFromSide()水平滚动。
document.getElementById('test').innerHTML=el.scrollTop+''+el.scrollHeight;
这应该打印出两个数字。第二个将是选取框元素的高度，并将保持不变。随着滚动的进行，第一个数字将增加（如果创建了向后滚动字幕，则第一个数字将减少）。当第一个数字到达选取框的结尾时，将被重置。如果不是，或者达到某个值并停止，那么您需要查看以下代码行（scrollFromBottom()在本例中为以下代码）。
if(el.scrollTop >= el.scrollHeight-150){
el.scrollTop= 0;
};这里的150值必须与您为
在您的CSS中标记。如果小于该值，则它将永远不会重复。如果大于该值，它将在到达底部之前重复。
更新
30/01/2007-添加了垂直和水平滚动。
22/05/2008-getElementsByTagNames()由于编码错误，函数中发现了小错误。还需要在init()功能中启动选取框。
28/08/2008-添加了一些有用的描述和注释。
2009年11月2日-修复了快速移动的疯狂漏洞。看来，通过clearTimeout()在滚动功能的开头添加一个调用，它会停止JavaScript尝试设置大量setTimeout()调用的工作，因此，越来越多地调用此函数。我已经更新了代码和示例以反映此更改。