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

不言
リリース: 2018-05-07 16:13:01
オリジナル
5251 人が閲覧しました

この記事では主にスクロールテキストを生成するための 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 の学習で、読者は をさらに深めていきます。タグの動的行動学習。


関連する推奨事項:

シンプルなショッピングカートを実装するための HTML コード


以上がスクロールテキストを作成するHTMLコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート