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

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

WBOY
リリース: 2016-06-24 11:35:02
オリジナル
1162 人が閲覧しました

+ 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>

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート