ホームページ ウェブフロントエンド htmlチュートリアル HTMLマーキー(テキストスクロール)の詳しい説明_html/css_WEB-ITnose

HTMLマーキー(テキストスクロール)の詳しい説明_html/css_WEB-ITnose

Jun 24, 2016 am 11:35 AM

+ 3 色 =red>Hello, World

次の 2 つのイベントがよく使用されます:

onMouseOut="this.start()": マウスがスクロールを継続するように設定するために使用されます。エリア外に移動します onMouseOver="this.stop()": マウスがこのエリアに移動したときにスクロールを停止するように設定するために使用されます

コードは次のとおりです: onMouseOut="this.start()": マウスが領域の外に出たときにスクロールを続けるように設定するために使用されます onMouseOver="this.stop()": 使用されますマウスが領域内に移動したときにスクロールを停止するようにマウスを設定します

これは完全な例です:

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

これは完全な例です

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

align

タグのコンテンツの配置を設定します

absbottom: 絶対的な下揃え (g、p およびその他の文字は下に揃えられます)

absmiddle: 絶対的な中央揃え

baseline: 下の行の揃え

bottom:下揃え (デフォルト)

left: 左揃え

middle: 中央揃え

right: 右揃え

texttop: 上の行揃え

top: 上揃え

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

align="absbottom": 絶対的な下揃え (g、p などの文字の下端に揃えます)。

align="absmiddle": 絶対的な中央揃え。

align="baseline": ボトムラインの配置。

align="bottom": 下揃え (デフォルト)。

align="left": 左揃え。

align="middle": 中央揃え。

align="right": 右揃え。

align="texttop": 上の行の配置。

align="top": 上揃え。

behavior

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

alternate: 両端の間を前後にスクロールすることを意味します。

スクロール: 一方の端からもう一方の端までスクロールすることを意味し、それを繰り返します。

スライド: 繰り返さずに一方の端からもう一方の端までスクロールすることを意味します。

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

alternate: 両端の間を前後にスクロールすることを意味します。

scroll: 一方の端からもう一方の端までスクロールすることを示し、繰り返されます。

slide: 繰り返さずに一方の端からもう一方の端までスクロールすることを意味します。

bgcolor

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

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

アクティブな字幕の背景色を設定します bgcolor="#006699"

アクティブな字幕の背景色を設定します bgcolor="rgb(10%,50%,100%,)"

Set アクティブな字幕の背景色を設定します。 bgcolor="red"

direction

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

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

アクティブな字幕のスクロール方向を設定します スクロール方向 direct="down": 下

アクティブな字幕のスクロール方向を設定します direct="left": 左へ< ;/マーキー>

アクティブな字幕のスクロール方向を設定しますdirection="right": right

アクティブな字幕のスクロール方向を設定しますdirection= "up": up

height

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

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

width

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

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

hspace

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

これは水平方向 (水平) ディスプレイ ボックスの周りのスペース。

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

;hspace="100" incliveアクティブな字幕と親コンテナの垂直境界の位置との間の距離を設定します。これは、ディスプレイボックスの周りの垂直空間を制御します。コードは次のとおりです。 " bgcolor="# CCCCCC">hspace="100"

loop

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

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

歩き続けます。

 

2 回しか歩いていない

スクロールマウント

セットアクティブな字幕のスクロール速度 (ピクセル単位)

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

scrollamount="10"

scrollamount="30"

scrolllay

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

値が大きい場合、1 ステップと 1 つの一時停止の効果があります

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

scrolllay="10"

スクロール遅延="100"

scrolllay="1000"

< ;marquee> ...

モバイル属性の設定、この動きはテキストに限定されず、画像、表などにも適用できます。

マウス属性

onMouseOut=this.start( ) ..... .マウスが外に出るとスクロールします

onMouseOver=this.stop() .........マウスが通り過ぎるとスクロールを停止します

Direction

#=left,right,up,down < ;marquee direct=left>右から左に移動します!

ウェイ

#=スクロール、スライド、交互 ぐるぐる回ってください!

一度歩いてから立ち止まってください。 =3 width=50% behaviour=scroll>3 回のみ

3 回のみ

四球はたったの3つ!

スピード

ラララ、とても速く歩いています!

Delay

ラララ、一歩踏み出す、ストップ!

外観(レイアウト)設定

整列

#=上、中、下

ラララ、動けます!

背景色

#=rrggbb 16 進数、または次の事前定義された色:

黒、オリーブ、ティール、赤、青、栗色、ネイビー、グレー、ライム、

フクシア、ホワイト、グリーン、パープル、シルバー、イエロー、アクア カラー!

エリア

エリア!

空白

(余白)

エリア!

これは、移動する必要があるテキストまたは画像です (画像を挿入するには、ここにカーソルを置いたときに INSERT コマンドを使用します)

Marquee のスクロール属性パラメータ

から始まり で終わる多くのパラメータが、実際に友人たちによって今でもよく使われています。はい、この Web ページ パラメーターのプロパティについて簡単に説明します。

スクロール パラメーター:

1: 方向: DIRECTION

左 --- 左 (デフォルト)

右 --- 右

- - ----上

下------下

2: メソッド: BEHAVIOR

SCROLL -------サラウンドスクロール(デフォルト)

SLIDE----------1回スクロール

ALTERNATE-----前後にスクロール

3: 回数: LOOP

LOOP=-1 または LOOP=INFINITE の場合、テキストのスクロールが無限ループ (デフォルト) であることを意味します

4: 速度: SCROLLDELAY

任意の自然整数

5: 配置: ALIGN

TOP--------上を揃える

MIDDLE------中央を揃える

BOTTOM------下を揃える

6: マウスを横切って離れる

onMouseOver=this.stop(); onMouseOut=this.start();

上にスワイプしてスクロールを停止します。そのままにしてスクロールを続けます

上記のパラメータを使用します。ロゴ画像のスクロール メソッドは簡単に作成できます。例:

比較するのは簡単です。スクロール速度120MMで前後にスクロールするコードです。下から上に壁にぶつかると中央に戻り、アイコンをクリックして入力します。 。

背景画像にローリング字幕を作成します

スクロールするテキスト

パラメータ設定:

a)scrollAmountは、値が大きいほど速度が速くなります。使用できない場合、デフォルトは 6 です。1 ~ 3 に設定することをお勧めします。 b) 停止と停止を示すために、scrollDelay も速度の制御に使用されます。デフォルトは 90 です。値が大きいほど遅くなります。スピード。通常、scrollDelay を設定する必要はありません。

c) Direction は明らかにスクロールの方向を表し、デフォルトは右から左: ← なので、左にスクロールする場合は二次パラメーターは必要ありません。他のオプションの値は、right、down、up です。スクロール方向は、右は→、上は↑、下は↓です。

d) width と height はスクロール領域のサイズを示すために使用されます。width は幅、height は高さです。特に垂直スクロールを行う場合は、高さの値を設定する必要があります。

e) の動作は、スクロール属性を制御するために使用されます。デフォルトは循環スクロール (スクロール) です。同様に、循環スクロールの場合、このパラメーターは必要ありません。その他のオプションの値には、alternative (代替スクロール) および slide (一度スクロールしてからスクロールを停止するスライド効果) が含まれます。

f) 単語の各行の前後で、 を使用して、単語の各行の色、サイズ、フォントを定義します。それらのうちの必要がない場合は、コードを削除するだけです。

画像のスクロール
ステートメント を使用します。また、画像名に中国語を使用しないように注意し、英語の大文字と小文字の区別に注意してください。

画像のハイパーリンク
を使用して を囲みます。img は border=0 に設定する必要があります。そうしないと、画像に青いフレームが表示されます。

正しい例は次のとおりです:

< a>
ここで、 href= は、最も一般的に使用されるハイパーリンクを表します。練習方法も非常に簡単で、普段FPやDWを使ってWebページを作っているときは、ソースコードをよく確認するだけです。

複数の画像を並べてスクロールします
通常、画像は
(戻る) または

(画像間の距離を正確に調整します) でリンクされます。最初に表内の画像の書式を設定してから、表内のすべてのステートメントをマーキーに追加して、表をスクロールさせることもできます。
次のようなコード:

<script>document.write('<marqueescrollAmount=2 width=340 height=160 direct=up onmouseover=stop() onmouseout=start()><a href=http: / /www.sina.com.cn/><img src=../../j/01.jpg border=0></a></marquee>')</script>

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

See all articles