コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLのスクロールバーのコードは何ですか? HTMLスクロールバーを設定するにはどうすればよいですか?

HTMLのスクロールバーのコードは何ですか? HTMLスクロールバーを設定するにはどうすればよいですか?

寻∝梦
リリース： 2018-09-04 11:30:54
オリジナル
13687 人が閲覧しました

この記事ではHTMLのスクロールバーのコードと、HTMLスクロールバーコードのマーキータグ属性の使い方を中心に紹介します

まずはこちらからご紹介します。 HTML バーコードでのスクロール:

今日は、HTML スクロール バー タグである marquee を紹介します。

タグは、最初のタグ と最後のタグ < の間に表示されます。 ;/marquee> コンテンツはスクロールするコンテンツです。 タグの属性には主に、動作、bgcolor、方向、幅、高さ、hspace、vspace、loop、scrollamount、scrollDelay などが含まれます。これらはすべてオプションです。

次に、HTML スクロール バーの設定について説明します。

次に、マーキー タグがその属性を使用して HTML スクロール バーを実装する方法を見てみましょう。

1.html マーキータグの動作属性:

動作属性のパラメータ値は、alternate、scroll、slide のいずれかで、それぞれテキストが前後にスクロール、一方向の循環スクロールを意味します。方向属性と動作属性の両方が タグに指定されている場合、スクロールとスライドのスクロール方向は方向属性のパラメータの設定に基づきます。 

<marquee behavior="alternate">我来回滚动</marquee> 
<marquee behavior="scroll">我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee> 
<marquee behavior="slide">我只滚动一次</marquee> 
<marquee behavior="slide" direction="up">我改向上只滚动一次了</marquee>
ログイン後にコピー

スタイルは非常に美しく、ダイナミックです。興味がある場合は、ここで練習して、//m.sbmmt.com/code/26516 にアクセスしてください。ここに HTML を貼り付けると、コードを完成させる必要がなく、ここで表示できるようになります。

これは属性の 1 つにすぎません。他にもいくつかの属性があります。見てみましょう:

2.html マーキー タグの bgcolor 属性:

テキスト スクロール範囲の背景色、パラメータ値は 16 進数 (形式: #AABBCC または #AA5566 など)、または事前定義された色の名前 (赤、黄、青など) です。以下に示すように: 

<marquee behavior=="slide" direction="left" bgcolor="red">我的背景色是红色的</marquee>
ログイン後にコピー

3.html マーキー タグの方向属性:

テキストのスクロールの方向。この属性のパラメータ値には、下、左、右、上を表す 4 つの単一のオプション値があります。スクロール方向はそれぞれ下、左、右、上です。以下に示すように: 

    <marquee direction="right">我向右滚动</marquee> 
    <marquee direction="right">我向下滚动</marquee>
ログイン後にコピー

4.html マーキー タグの幅と高さの属性:

幅と高さの属性は、ページ上のスクロール テキストの長方形の範囲のサイズを決定します。 width 属性は長方形の幅を指定するために使用され、height 属性は長方形の高さを指定します。これら 2 つのプロパティのパラメータ値は、数値またはパーセンテージにすることができます。数値は、長方形が占めるピクセル数 (幅または高さ) を表し、パーセンテージは、長方形が占めるブラウザ ウィンドウのパーセンテージ (幅または高さ) を表します。矩形。以下に示すように: 

    <marquee width="300" height="30" bgcolor="red">我宽300像素，高30像素。</marquee>
ログイン後にコピー

5.html マーキータグのscrollamount属性とscrollDelay属性:

これら2つの属性は、テキストスクロールの速度(scrolllamount)と遅延(scrolllay)、およびパラメータ値を決定します。はすべて正の整数です。以下に示すように: 

    <marquee scrollamount="100">我速度很快.</marquee> 
    <marquee scrollamount="50">我慢了些。</marquee> 
    <marquee scrolldelay="30">我小步前进。</marquee> 
    <marquee scrolldelay="1000" scrollamount="100">我大步前进。</marquee>
ログイン後にコピー

6.html マーキー タグの align 属性:

この属性は、内側の境界線の上下左右のスクロール テキストの位置を決定します。 と の間のコンテンツを画像や他のオブジェクトに置き換えることもできます。

HTML マーキー タグに関する注意事項:

マーキー要素のデフォルトの幅は、その親要素の幅と同じです。マーキーが幅が指定されていない TD 内にある場合は、マーキーの幅を明示的に設定する必要があります。マーキーも TD 幅も指定されていない場合、スクロール マーキーの幅は 1 ピクセルに制限されます。

垂直スクロールの字幕を作成するには、scrollLeft プロパティを 0 に設定します。水平スクロールの字幕を作成するには、scrollTop プロパティを 0 に設定します。これにより、スクリプト設定がオーバーライドされます。

scrollLeft プロパティとscrollTop プロパティは、字幕がスクロールしているときは読み取り専用です。スクロール状態にない場合、横スクロールに設定された字幕の場合は、scrollLeft が読み取りおよび書き込み可能になり、垂直スクロールに設定された字幕の場合は、scrolltop が読み取りおよび書き込み可能になります。

この要素は、Microsoft® Internet Explorer 3.0 の HTML および Internet Explorer 4.0 のスクリプトで使用できます。

この要素はブロック要素です。

この要素には終了タグが必要です。

【編集者のおすすめ】

HTMLに下線を追加するにはどうすればよいですか? htmlタグに下線を付ける使用例

HTMLボタンタグのスタイルを設定するには？ HTMLボタンタグのスタイル紹介

以上がHTMLのスクロールバーのコードは何ですか? HTMLスクロールバーを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html marquee
ソース：php.cn
前の記事：HTML5の進行状況タグで進行状況バーの色を変更するにはどうすればよいですか?プログレスプログレスバーの詳しい説明 次の記事：HTML マーキー タグで上下にスクロールし、マーキー タグのスクロール速度を設定する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2174
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2325
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1958
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1840
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1887
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート