HTML5でのマーキータグの使い方-フロントエンドQ&A-php.cn

HTML5でのマーキータグの使い方

青灯夜游

リリース： 2022-08-25 17:51:20

オリジナル

2393 人が閲覧しました

HTML5 では、マーキータグは、スクロールするテキストまたは画像を作成するために使用されます (構文 "text or image)"。これにより、タグペアに含まれるコンテンツを次のようにすることができます。 Web ページ上で水平方向または垂直方向に下にスクロールします。プロパティを設定することで、テキストがコンテナの端に達したときの動作を制御できます。たとえば、動作プロパティでは、スクロール方法 (循環スクロール、1 回だけスクロールしてその後停止) を制御できます。、前後に交互にスクロールします)。

HTML5でのマーキータグの使い方

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML では、マーキーは「スクロール」を意味します。マーキー要素 () は、スクロールテキストを挿入するために使用されます。

タグはペアで表示されます。コンテンツは開始タグ () と終了タグ () の間に書き込まれます。

このタグは、Web ページ上でテキストまたは画像を水平方向または垂直方向にスクロールさせるために使用されます。そのプロパティを使用して、テキストがコンテナの端に達したときの動作を制御できます。

マーキースクロールテキストタグ

ページには、ダイナミックテキスト、ダイナミックイメージ、オーディオ、ビデオなどの多くのマルチメディア要素が存在しますが、最も単純なものは、 1 つは非常に高いスクロールテキストです。HTML でスクロールテキストを追加したい場合は、marquee タグを使用する必要があります。

最初に最も単純な例を見てみましょう:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
    </head>

    <body style="background: black;padding: 20px;">
        <marquee><span style="font-weight: bolder;font-size: 40px;color: white;">Welcom PHPCN!</span></marquee>
    </body>
</html>

ログイン後にコピー

表示効果をより明確にするために、ここではページの背景を黒に設定し、スクロールするテキストを白に設定しています。

HTML5でのマーキータグの使い方

このようにして、最も単純なスクロールテキストを実装しました。スクロールテキストには、スクロールを制御するために使用される属性もいくつかあります。方向、スクロール速度など、一般的に使用されるいくつかの属性を以下で見てみましょう。

direction スクロール方向属性

デフォルトでは、テキストは右から左にスクロールします。実際のアプリケーションでは、方向を変更する必要がある場合があるため、この属性を通じて設定できます。利用可能な値この属性の値は: up、down、left、right で、それぞれ上下左右のスクロールを表します。。
例は次のとおりです。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee direction="up">UP</marquee>
        <marquee direction="down">DOWN</marquee>
        <marquee direction="left">LEFT</marquee>
        <marquee direction="right">RIGHT</marquee>
    </body>

</html>

ログイン後にコピー

HTML5でのマーキータグの使い方

behavior スクロールメソッド属性

ローリングメソッドは、次のようなビヘイビアーを通じて設定できます。往復運動などとして動作に使用できる値は、scroll、slide、alternate です。これらはそれぞれ、循環スクロール、一度スクロールして停止する、交互にスクロールして戻る、スクロールを表します。前方へ。
例は以下のとおりです。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee behavior="scroll">scroll</marquee>
        <marquee behavior="slide">slide</marquee>
        <marquee behavior="alternate">alternate</marquee>
    </body>

</html>

ログイン後にコピー

HTML5でのマーキータグの使い方

scrolllay スクロール遅延属性とscrollamount スクロール速度属性

テキストスクロールを設定可能スクロール遅延属性の時間間隔を通じて。スクロール遅延の時間間隔の単位はミリ秒です。この時間間隔は 2 つのスクロールステップ間の時間間隔として設定されます。時間が長すぎると、ストップアンドゴー効果が発生します。
scrollmount は、スクロールのステップサイズを設定するために使用されます。
例は次のとおりです。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee scrolldelay="800" scrollamount="100">Welcom PHPCN!</marquee>
    </body>

</html>

ログイン後にコピー

HTML5でのマーキータグの使い方

loop スクロールループ属性

スクロール後にテキストを停止したい場合は、何度かループ属性を使用できます。

例は次のとおりです:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>marquee</title>
        <style>
            body {
                background: black;
                padding: 20px;
            }

            marquee {
                font-weight: bolder;
                font-size: 40px;
                color: white;
            }
        </style>
    </head>

    <body>
        <marquee loop="2">Welcom CSDN!</marquee>
    </body>

</html>

ログイン後にコピー

HTML5でのマーキータグの使い方