スクロールテキストを作成するHTMLコード-htmlチュートリアル-php.cn

スクロールテキストを作成するHTMLコード

不言

リリース： 2018-05-07 16:13:01

オリジナル

5229 人が閲覧しました

この記事では主にスクロールテキストを生成するための HTML コードを紹介します。必要な方は参考にしてください。このセクションでは、著者がの特別なタグについて説明します。 Web ページを作成できる HTML コード。テキスト内のテキストがスクロールし、そのスクロールプロパティを制御できます。

スクロールテキストを作成するこの章のこれまでの研究を通じて、読者はさまざまな段落テキストの表示方法を適切に制御することができましたが、どのように設定されてもテキストは静的です。

このセクションでは、著者は、Web ページ内のテキストをスクロールし、そのスクロールプロパティを制御できる HTML コードの特別なタグについて説明します。

スクロールテキストを作成する

この章のこれまでの研究を通じて、読者はさまざまな段落テキストの表示方法を適切に制御することができましたが、どのように設定されてもテキストは静的です。このセクションでは、Web ページ内のテキストをスクロールし、そのスクロールプロパティを制御できる HTML コードの特別なタグについて著者が説明します。

4.3.1 テキストスクロールを設定する
HTML テクノロジでテキストをスクロールする方法は、二重タグを使用することです。 HTML コードでは、スコープ内のテキストをスクロールできます。デフォルトでは、右から左への循環スクロールが可能です。 D:web ディレクトリに Web ページファイルを作成し、mar.htm という名前を付け、コード 4.15 に示すようにコードを記述します。コード 4.15 テキストスクロール設定: mar.htm

<html>
<head>
 <title>文字滚动的设置</title>
</head>
<body>
<font size="5" color="#cc0000">
文字滚动示例（默认）：<marquee>做人要厚道</marquee>
</font>
</body>
</html>

ログイン後にコピー

ブラウザのアドレスバーに http://localhost/mar.htm と入力すると、ブラウジング効果は図 4.15 のようになります。

図 4.15 テキストスクロールのデフォルト形式の設定図 4.15 より、幅が設定されていない場合、ラベルは排他的な行を占めます。

4.3.2 テキストのスクロール方向を設定する
タグのdirection属性は、コンテンツのスクロール方向を設定するために使用されます。属性値は、左、右、上、です。と down は、それぞれ左、上、下を表します。たとえば、次のコード: 親切にしてください

< ;marquee Direction="up">親切にしてください
親切にしてください

4.3 .3 テキストスクロールの速度と形式を設定します
テキストスクロールを設定するには、タグを使用します。そのプロパティは次のように説明されます。 — タグのscrollamount属性は、コンテンツのスクロール速度を設定するために使用されます。
— タグの behaviour 属性は、コンテンツのスクロール方法を設定するために使用されます。その値が代替の場合、コンテンツは前後にスクロールします。ループ。値が slide の場合、コンテンツのスクロールは一度停止し、ループしません。スクロールサイクルの数を設定するループ属性もあります。デフォルトでは制限なしです。
— タグのスクロール遅延属性は、コンテンツのスクロールの時間間隔を設定するために使用されます。
— タグの bgcolor 属性は、コンテンツのスクロール背景色を設定するために使用されます (本文の背景色設定と同様)。
— タグの width 属性は、コンテンツのスクロール背景の幅を設定するために使用されます。
— タグの height 属性は、コンテンツのスクロール背景の高さを設定するために使用されます。
mar.htm Web ページファイルを変更し、コード 4.16 に示すようにコードを記述します。

コード 4.16 テキストスクロール設定: mar.htm

<html>
<head>
 <title>文字滚动的设置</title>
</head>
<body>
<font size="3" color="#cc0000">
文字滚动示例（默认）：<marquee>做人要厚道</marquee>
文字滚动示例（向右）：<marquee direction="right" scrolldelay="500">做人要厚道</marquee>
文字滚动示例（向下，滚动方式为slide，速度为10）：<marquee scrollamount="10" behavior="slide">做人要厚道</marquee>
文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：<marquee scrollamount="2" behavior="alternate" loop="3">做人要厚道</marquee>
文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：<marquee direction="up" bgcolor="#CCFF66" width="250" height="55">做人要厚道</marquee>
</font>
</body>
</html>

ログイン後にコピー

ブラウザのアドレスバーに http://localhost/mar.htm と入力すると、ブラウジング効果は図 4.16 に示すようになります。

図 4.16 さまざまな形式のテキストスクロールの多くの属性により、テキストのスクロールが非常に便利になります。次の JavaScript の学習で、読者はをさらに深めていきます。タグの動的行動学習。

関連する推奨事項: