ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTML5でのマーキータグの使い方
HTML5でのマーキータグの使い方
- 青灯夜游オリジナル
- 2022-08-25 17:51:202390ブラウズ
HTML5 では、マーキー タグは、スクロールするテキストまたは画像を作成するために使用されます (構文 ")"。これにより、タグ ペアに含まれるコンテンツを次のようにすることができます。 Web ページ上で水平方向または垂直方向に下にスクロールします。プロパティを設定することで、テキストがコンテナの端に達したときの動作を制御できます。たとえば、動作プロパティでは、スクロール方法 (循環スクロール、1 回だけスクロールしてその後停止) を制御できます。 、前後に交互にスクロールします)。
このチュートリアルの動作環境: 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>表示効果をより明確にするために、ここではページの背景を黒に設定し、スクロールするテキストを白に設定しています。
このようにして、最も単純なスクロール テキストを実装しました。スクロール テキストには、スクロールを制御するために使用される属性もいくつかあります。方向、スクロール速度など、一般的に使用されるいくつかの属性を以下で見てみましょう。
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>
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>
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>
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>
(学習ビデオ共有: Web フロントエンドの開始 )
以上がHTML5でのマーキータグの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。