如何在JavaScript中创建连续文本字幕

淡淡的烟草味﹌ 2022-12-06 15:24 183阅读 0赞

This [JavaScript][] code will move a single text string that contains any text you choose through a horizontal marquee space without breaks. It does this by adding a copy of the text string to the beginning of the scroll as soon as it disappears out of the end of the marquee space. The script automatically works out how many copies of the content it needs to create to ensure that you never run out of the text in your marquee.

此[JavaScript][]代码将移动单个文本字符串，该字符串包含您在水平选框空间中选择的所有文本，而不会出现中断。 它通过将文本字符串的副本从选框空间的结尾消失后立即添加到滚动的开头来实现此目的。 该脚本会自动计算出需要创建多少个内容副本，以确保您不会用完字幕中的文本。

This [script][] does have a couple of limitations though so we'll cover those first so you know exactly what you are getting.

尽管此[脚本][script]确实有一些限制，所以我们将首先介绍这些限制，以便您确切地知道要获得什么。

*  The only interaction the marquee offers is the ability to stop the text scroll when the [mouse][] hovers over the marquee. It starts moving again when the mouse has moved away. You can include [links][] in your text, and the action of stopping the text scroll makes clicking these links easier for users.
    
    唯一的互动字幕报价是停止文本滚动的时候的能力[鼠标][mouse]悬停在字幕。 当鼠标移开时，它再次开始移动。 您可以在文本中包含[链接][links] ，并且停止文本滚动的操作使用户更容易单击这些链接。
 *  You can have multiple marquees on the same page with this script and can specify different text for each. The marquees all run at the same rate, though, which means that a mouseover that stops the scrolling of one marquee causes all marquees on the page to cease scrolling.
    
    使用此脚本，您可以在同一页面上拥有多个字幕，并且可以为每个字幕指定不同的文本。 但是，所有选取框都以相同的速率运行，这意味着鼠标悬停会停止滚动一个选取框，从而导致页面上的所有选取框停止滚动。
 *  The text in each marquee must be all on one line. You can use inline HTML tags to style the text, but block tags and tags will break the code.
    
    每个字幕中的文本必须全部放在一行上。 您可以使用内联HTML标签来设置文本样式，但是阻止标签和标签会破坏代码。

## 文本字幕的代码 **(** Code for the Text Marquee  **)** ##

The first thing you need to do to be able to use my continuous text marquee script is to copy the following [JavaScript][JavaScript 1] and save it as *marquee.js.*

要使用我的连续文本选取框脚本，需要做的第一件事是复制以下[JavaScript][JavaScript 1]并将其另存为*marquee.js。*

This includes the code from my examples, which adds two new mq objects containing the information on what to display in those two marquees. You may delete one of those and change the other to display one continuous marquee on your page or repeat those statements to add even more marquees. The mqRotate function must be called passing mqr after the marquees are defined as that will handle the rotations.

这包括我示例中的代码，其中添加了两个新的mq对象，这些对象包含有关在这两个选取框中显示内容的信息。 您可以删除其中一个，然后更改另一个以在页面上显示一个连续的字幕，或者重复这些语句以添加更多的字幕。 在定义字幕后，必须调用mqRotate函数以传递mqr，因为它将处理旋转。

function start() {   new mq('m1');   new mq('m2');   mqRotate(mqr); // must come last}window.onload = start;

// Continuous Text Marquee// copyright 30th September 2009by Stephen Chapman// http://javascript.about.com// permission to use this Javascript on your web page is granted// provided that all of the code below in this script (including these// comments) is used without any alterationfunction objWidth(obj) {if(obj.offsetWidth) return  obj.offsetWidth;if (obj.clip) return obj.clip.width; return 0;} var mqr = []; functionmq(id){this.mqo=document.getElementById(id); var wid =objWidth(this.mqo.getElementsByTagName('span')[0])+ 5; var fulwid =objWidth(this.mqo); var txt =this.mqo.getElementsByTagName('span')[0].innerHTML; this.mqo.innerHTML= ''; var heit = this.mqo.style.height; this.mqo.onmouseout=function(){mqRotate(mqr);}; this.mqo.onmouseover=function(){clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw =Math.ceil(fulwid/wid)+1; for (var i=0;i <maxw;i++){this.mqo.ary[i]=document.createElement('div');this.mqo.ary[i].innerHTML = txt; this.mqo.ary[i].style.position ='absolute'; this.mqo.ary[i].style.left = (wid*i)+'px';this.mqo.ary[i].style.width = wid+'px'; this.mqo.ary[i].style.height =heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);}function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j> -1; j--) {maxa = mqr[j].ary.length; for (var i=0;imqr[j].ary[i].style;  x.left=(parseInt(x.left,10)-1)+'px';} var y =mqr[j].ary[0].style; if (parseInt(y.left,10)+parseInt(y.width,10)<0){var z = mqr[j].ary.shift(); z.style.left = (parseInt(z.style.left) +parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);}}mqr[0].TO=setTimeout('mqRotate(mqr)',10);}

You next insert the script into your web page by adding the following code into the head section of your page:

接下来，您将脚本添加到网页中，方法是将以下代码添加到网页的顶部：

## 添加样式表命令 **(** Add a Style Sheet Command **)** ##

We need to add a style sheet command to define how each of our marquees will look.

我们需要添加一个样式表命令来定义每个字幕的外观。

Here's the code we used for the ones on our example page:

这是我们用于示例页面上的代码：

.marquee {position:relative;     overflow:hidden;     width:500px;     height:22px;     border:solid black 1px;     }.marquee span {white-space:nowrap;}

You can either place it in your external style sheet if you have one or enclose it between tags in the head of your page.

您可以将其放在外部样式表中(如果有的话)，也可以将其放在页面顶部的标签之间。

You can change any of these properties for your marquee; however, it must remain.**`position:relative`**

您可以为选取框更改任何这些属性。 但是，它必须保留。 **`position:relative`**

## 将选取框放在您的网页上 **(** Place the Marquee on Your Web Page **)** ##

The next step is to define a div in your web page where you are going to place the continuous text marquee.

下一步是在网页中定义一个div，您将在其中放置连续文本字幕。

The first of my example marquees used this code:

我的示例字幕的第一个使用了以下代码：

The quick brown fox jumped over the lazy dog. She sells sea shells by the sea shore.

The class associates this with the stylesheet code. The id is what we will use in the new mq() call to attach the marquee of images.

该类将其与样式表代码关联。 id是我们将在新的mq()调用中用来附加图像选取框的名称。

The actual text content for the marquee goes inside the div in a span tag. The span tag's width is what will be used as the width of each iteration of the content in the marquee (plus 5 pixels just to space them apart from each other).

选框的实际文本内容在span标签中的div内。 span标签的宽度将用作选框内容每次迭代的宽度(加上5个像素以将它们彼此隔开)。

Finally, make sure that your JavaScript code to add the mq object after the page loads contains the right values.

最后，确保要在页面加载后添加mq对象JavaScript代码包含正确的值。

Here's what one of our example statements looks like:

这是我们的示例语句之一：

`new mq('m1');`

The m1 is the id of our div tag so that we can identify the div that is to display the marquee.

m1是div标签的ID，因此我们可以识别要显示字幕的div。

## 向页面添加更多字幕 **(** Adding More Marquees to a Page **)** ##

To add additional marquees, you can set up additional divs in the HTML, giving each its own text content inside a span; set up additional classes if you want to style the marquees differently; and add as many new mq() statements as you have marquees. Make sure that the mqRotate() call follows them to operate the marquees for us.

要添加其他字幕，您可以在HTML中设置其他div，在跨度内为每个文本提供自己的文本内容； 如果您想以不同的样式设置字幕，请设置其他类； 并根据需要添加尽可能多的新mq()语句。 确保在它们后面跟随mqRotate()调用来为我们操作字幕。

> 翻译自: [https://www.thoughtco.com/how-to-create-a-continuous-text-marquee-in-javascript-4071126][https_www.thoughtco.com_how-to-create-a-continuous-text-marquee-in-javascript-4071126]

[JavaScript]: https://www.thoughtco.com/what-is-javascript-2037921
[script]: https://www.thoughtco.com/javascript-programming-4133476
[mouse]: https://www.thoughtco.com/history-of-the-computer-mouse-1991664
[links]: https://www.thoughtco.com/create-links-in-php-2693950
[JavaScript 1]: https://www.thoughtco.com/why-javascript-2037560
[https_www.thoughtco.com_how-to-create-a-continuous-text-marquee-in-javascript-4071126]: https://www.thoughtco.com/how-to-create-a-continuous-text-marquee-in-javascript-4071126