HTML の marquee 属性の詳細な説明

HTML の marquee 属性の詳細な説明

このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルでのみサポートされているため、IEカーネル以外のブラウザ(Netscapeなど)を使用している場合は、次の興味深い効果の一部を見ることができない可能性があります。

このタグはコンテナタグです

文法:

 <マーキー></マーキー>

以下に簡単な例を示します。

コードは次のとおりです。

 <marquee><font size=+3 color=red>こんにちは、世界</font></marquee>

よく使用されるイベントは次の 2 つです。

onMouseOut="this.start()": マウスが領域外に移動してもスクロールを継続するように設定するために使用されます。

onMouseOver="this.stop()": マウスがこの領域に移動したときにスクロールを停止するために使用されます

コードは次のとおりです。

 <marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" : マウスが領域外に移動したときにスクロールを継続するように設定するために使用されます。 onMouseOver="this.stop()" : マウスが領域内に入ったときにスクロールを停止するように設定するために使用されます。</marquee>

完全な例を以下に示します。

コードは次のとおりです。

 <marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
完全な例はこちらです</marquee>

このタグは最大 11 個の属性をサポートします。

整列する

<marquee>タグコンテンツの配置を設定する

absbottom: 絶対下揃え(gやpなどの文字の下揃え)
absmiddle: 絶対中央揃え
ベースライン: ボトムラインの配置
bottom: 下揃え(デフォルト)
左: 左揃え
中央: 中央揃え
右: 右揃え
texttop: 上行の配置
上: 上揃え

コードは次のとおりです。

 <marquee align="absbottom">align="absbottom": 絶対下揃え(g や p などの文字の下揃え)。 </マーキー>
<marquee align="absmiddle">align="absmiddle": 絶対中央揃え。 </マーキー>
<marquee align="baseline">align="baseline": ベースラインを揃えます。 </マーキー>
<marquee align="bottom">align="bottom": 下揃え(デフォルト)。 </マーキー>
<marquee align="left">align="left": 左揃え。 </マーキー>
<marquee align="middle">align="middle": 中央に揃えます。 </マーキー>
<marquee align="right">align="right": 右揃え。 </マーキー>
<marquee align="texttop">align="texttop": 上の行を揃えます。 </マーキー>
<marquee align="top">align="top": 上揃え。 </マーキー>

行動

スクロール方法を設定します。

交互: 両端の間を前後に転がることを意味します。

スクロール: 端から端までスクロールして繰り返すことを意味します。

スライド: 繰り返しなしで、端から端までスクロールすることを意味します。

コードは次のとおりです。

 <marquee behavior="alternate">alternate: は、両端の間を前後にスクロールすることを意味します。 </マーキー>
<marquee behavior="scroll">スクロール: 端から端までスクロールして繰り返すことを意味します。 </マーキー>
<marquee behavior="slide">slide: は、繰り返しなしで端から端までスクロールすることを意味します。 </マーキー>

背景色

アクティブな字幕の背景色を設定します。背景色は、RGB、16 進数値形式、または色名で設定できます。

コードは次のとおりです。

 <marquee bgcolor="#006699">アクティブな字幕の背景色を設定します bgcolor="#006699"</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">アクティブな字幕の背景色を設定します bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">アクティブな字幕の背景色を設定します bgcolor="red"</marquee>

方向

アクティブな字幕のスクロール方向を設定する

コードは次のとおりです。

 <marquee direction="down">アクティブな字幕のスクロール方向を設定します direction="down": 下向き</marquee>
<marquee direction="left">アクティブな字幕のスクロール方向を設定します direction="left": left</marquee>
<marquee direction="right">アクティブな字幕のスクロール方向を設定します direction="right": right</marquee>
<marquee direction="up">アクティブな字幕のスクロール方向を direction="up": 上向きに設定します</marquee>

身長

アクティブな字幕の高さを設定する

コードは次のとおりです。

 <marquee height="500" direction="down" bgcolor="#CCCCCC">アクティブな字幕の高さを height="500" に設定します</marquee>

アクティブな字幕の幅を設定する

コードは次のとおりです。

 <marquee width="500" bgcolor="#CCCCCC">アクティブな字幕の幅を width="500" に設定します</marquee>

スペース

アクティブな字幕の位置と親コンテナの水平境界線の間の距離を設定します

これは、表示ボックスの周囲の水平方向のスペースを制御します。

コードは次のとおりです。

 <テーブルの幅="500" 境界線="1" 配置="中央" セルパディング="0" セル間隔="0">
    <tr>
      <td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
    </tr>
  </テーブル>

スペース

アクティブな字幕の位置と親コンテナの垂直境界線の間の距離を設定します

これは、表示ボックスの周囲の垂直スペースを制御します。

コードは次のとおりです。

 <marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>

ループ

スクロール回数を設定します。 loop=-1 の場合、常にスクロールすることを意味します。デフォルト値は -1 です。

コードは次のとおりです。

 <marquee loop="-1" bgcolor="#CCCCCC">私は歩き続けます。 </マーキー>
<p>&nbsp;</p>
<marquee loop="2" bgcolor="#CCCCCC">歩くのは2回だけ</marquee>

スクロール量

アクティブな字幕のスクロール速度をピクセル単位で設定します

コードは次のとおりです。

 <marquee スクロール量="10" >スクロール量="10" </marquee>
<marquee スクロール量="20" >スクロール量="20" </marquee>
<marquee スクロール量="30" >スクロール量="30" </marquee>

スクロール遅延

アクティブな字幕を 2 回スクロールする間の遅延時間をミリ秒単位で設定します。

値が大きすぎると一時停止効果が発生します。

コードは次のとおりです。

 <marquee スクロール遅延="10" >スクロール遅延="10" </marquee>
<marquee スクロール遅延="100" > スクロール遅延="100" </marquee>
<marquee スクロール遅延="1000">スクロール遅延="1000" </marquee>

以上が、私がご紹介した HTML の marquee 属性の詳細な説明です。お役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  CSS3のwebkit-box-reflectを巧みに使用して、さまざまな動的効果を実現します。

>>:  システム外のフォント参照とトランジション効果

推薦する

MySQL RouterはMySQLの読み取りと書き込みの分離を実装します

目次1. はじめに2. MySQLルーターを構成する2.1 MySQLルーターのインストール2.2 ...

SQL GROUP BYの詳細な説明と簡単な例

GROUP BY ステートメントは、Aggregate 関数と組み合わせて使用​​され、1 つ以上の...

記事では、js を使用して弾幕効果を実現する方法を説明します

目次新しい HTML ファイルを作成します。初期テンプレートを作成するHTML の追加CSS パディ...

Vueでのバスの使用に関する詳細な説明

Vue バス メカニズム (バス) vuex を使用するだけでなく、vue 内の親子以外のコンポーネ...

TomcatをダウンロードしてLinuxにインストールする詳細な手順

Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...

Linux (CentOS) システムで MySQL データベース ディレクトリの場所を変更する方法

CentOS システムで MySQL データベース ディレクトリの場所を変更する方法1. まず、My...

外部キー制約を持つテーブルデータを削除する MySQL メソッドの紹介

MySQLでテーブルやデータを削除する場合、 [エラー] 1451 - 親行を削除または更新できませ...

MYSQL メタデータ ロック (MDL ロック) MDL ロックの問題分析

1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...

QT が MYSQL データベースに接続するための詳細な手順

最初のステップは、対応するデータベースモジュール(sql)をプロジェクトファイル( .pro )に追...

Docker ベースの Etcd 分散デプロイメントの方法と手順

1. 環境整備1.1 基本環境NTP設定: 省略 #時間の一貫性を確保するためにNTPサービスを設定...

CSSを使用して3Dフォトウォール効果を作成する

CSS を使用して 3D フォト ウォールを作成します。具体的なコードは次のとおりです。 <!...

CSS floatプロパティの詳細な説明

1. フローティングとは何ですか?フローティングは、その名の通り、浮遊することを意味します。要素がド...

ハイパーリンクの幅と高さを直接設定できない問題の解決策

幅と高さを直接使用することはできません。 display:block; または display:in...

CSS ウェイト値(カスケード)の例の詳細な説明

•CSSには多くのセレクターがあります。複数のセレクターを同じ要素に適用するとどうなるでしょうか? ...

Vue3でカルーセルコンポーネントをカプセル化する方法

目的カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。一般的な...