XHTML コードで Marquee タグを使用する方法

XHTML コードで Marquee タグを使用する方法
フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法について言及しているのを見ました。友人のコメントをいくつか読んでみましたが、どれも良いと思いました。モデレーターの greengnn は、Marquee は標準を満たしておらず、W3C によって放棄されていると指摘しました。良い効果がなくなったので、そこに行くのは無理だと文句を言う友人もいました。見ているだけでもイライラするから、行ったほうがいいという友達もいました。誰もが独自の視点を持っていますが、それをどのように理解するかは一つの問題であり、なぜそうなのかを理解する必要があります。ここでは、greengnn の結論に基づいていくつかの内容を修正および追加し、誰もが理解して理解できることを願っています。

最初に訂正すべきことは、Marquee が W3C によって放棄されたということです。この文は実際には間違っています。なぜでしょうか? Marquee は W3C によって公式タグとして使用されたことがないためです。 W3C はこのラベルを確立したことはなく、ましてや「放棄」したこともありません。これは結婚する前に離婚を要求するようなものです。実際、Marquee は他の多くのタグと同様に、Microsoft や Netscape などの企業によって非公開で作成されたものであり、W3C はこのタグを一度も認識していません。この裕福な会社は理不尽な問題を抱えているが、この儲からない組織は頑固に言い続けるだけだ!

なぜ W3C は Marquee をこれまで認識しなかったのでしょうか?正直に言うと、このラベルは多くの Web デザイナーの目にはドライバーのように見えます。創業当初、私たちは自社の技術力を自慢していました。しかし、現在ではそれを使用することは推奨されていません (余談ですが、W3C ではその使用を許可していないと言う人が多いですが、これは間違いです。W3C には、それを使用することを制限したり、使用できないようにする権利はありません)。なぜでしょうか。では、この標準が何であるかを明確にする必要があります。標準は技術ではなく、単なる仕様と提案です。私たちは、オリジナルの HTML4.0 タグをまだ使用しています。この標準では、XHTML にタグは追加されませんが、推奨タグ (例: p、div、ul、dl、span、em...) と推奨タグ (例: font、b、u、i...) が提供され、セマンティクスと使用法の標準が提唱されています。もちろん、標準は XHTML だけではなく、CSS、DOM、スクリプト言語も含まれます。 CSS は標準が確立された後に作成されたものだと考える人が多いですが、実際には CSS は古くから存在しています。CSS の標準についても同様です。CSS フィルターなど、一部のブラウザ メーカーが開発した CSS は使用しないことが推奨されています。

この標準には、機能の分離という非常に重要な点がもう 1 つあります。これは、構造、スタイル、動作の 3 つの部分に分かれています。これらの 3 つの部分には、構造 (xHTML、XML)、スタイル (CSS)、動作 (DOM、ECMAScript) が含まれます。さて、戻って、Marquee が W3C に認められていない理由について考えてみましょう。誰もが理解できると思います。 FONT、B などのタグと同様に、これはもはや構造タグではありません。これらにはスタイルと動作の特徴があり、これらを構造として分類するのは明らかに冗長です。

したがって、マーキー効果を維持または実現したい場合は、JavaScript にさらに注意を払う必要があります。スクリプト言語を使用すると、Web ページを動的にすることができます。指定した場所を移動させたい場合は、タグ内のIDとCLASSの使い方に注意する必要があります。

この興味深いエフェクトを誰もが簡単に使用できるようにするために、私は Aoao に JS を書いてもらうよう特別に依頼しました。次のコードをご覧ください。

JSコード:

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

関数 getElementsByClass(検索クラス、タグ名) {
var classElements = 新しい配列();
タグ名 == null の場合
タグ名 = '*';
タグ名によって要素を取得します。
var elsLen = els.length;
var パターン = new RegExp("(^|\s)" searchClass "(\s|$)");
(i = 0, j = 0; i < elsLen; i ) の場合 {
if ( パターン.テスト(els[i].クラス名) ) {
クラス要素[j] = els[i];
じゅう
}
}
classElements を返します。
}
関数ccMarquee(クラス名){
var a = getElementsByClass(クラス名);
(i = 0; i < a.length; i ) の場合 {
a[i].innerHTML="<marquee>" a[i].innerHTML "</marquee>";
}
}window.onload = 関数 () {
ccMarquee("ccMarquee");
}

XHTML コード:


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

<div class="ccMarquee">
<a href="" title="">これはスクロールしています</a>
</div>

スクロール効果を使用する必要がある場合は、外側のタグに Class="ccMarquee" を追加するだけです。大文字小文字に注意してください。

付録: <marquee> タグ属性の詳細な説明

まず次のコードを見てください


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

<marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()> ここにスクロールコンテンツを入力してください</marquee>

それでは詳しく分析してみましょう

◎方向はスクロール方向を示します。値は左、右、上、下のいずれかです。デフォルト値は左です。
◎動作はスクロールモードを示します。値は scroll (連続スクロール)、slide (1回スライド)、alternative (往復スクロール) のいずれかになります。
◎ loop はループ回数を示し、値は正の整数で、デフォルトは無限ループです。 ◎ scrollamount は移動速度を示し、値は正の整数で、デフォルトは 6 です。
◎ scrolldelayは一時停止時間を示し、値は正の整数で、デフォルトは0で、単位はミリ秒のようです。◎ alignは要素の垂直方向の配置を示し、値はtop、middle、bottomで、デフォルトはmiddleです。
◎ bgcolor はモーション領域の背景色を表します。値は 16 進数の RGB カラーです。デフォルトは白です。◎ height と width はモーション領域の高さと幅を表します。値は正の整数 (ピクセル単位) またはパーセンテージです。デフォルトの width=100% height はタグ内の要素の高さです。◎ hspace と vspace は要素から領域の境界までの水平距離と垂直距離を表します。値はピクセル単位の正の整数です。
◎ onmouseover=this.stop() onmouseout=this.start() は、マウスがその領域上にあるときにスクロールが停止し、マウスが領域から離れたときにスクロールが継続することを意味します。

<<:  マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

>>:  Alpine Dockerイメージフォント問題解決操作

推薦する

CSS が複数のクラスに一致する方法のサンプルコード

CSSは複数のクラスにマッチする次の HTML タグ li、クラスはオープン スタイルです。私の要件...

JavaScript Alert関数の実行順序の詳細な説明

目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...

MySQLデータベースインデックスの欠点と適切な使用

目次インデックスの適切な使用1. 通常のインデックスのデメリット2. 主キーインデックスの落とし穴3...

動的なテーブル効果を実現するJavaScript

この記事では、動的なテーブル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

Vueはシンプルなマーキー効果を実装します

この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...

互換性を維持しながら他のウェブページのデータを適用する iframe の使い方

以下は、Shiji Tiancheng が Tencent KartRider ページを呼び出すため...

MySQL 高可用性クラスタの展開とフェイルオーバーの実装

目次1. 内閣府1. コンセプト2. MHAの構成3. MHAの特徴2. MySQL+MHAをビルド...

MySQL シリーズ 14 MySQL 高可用性実装

1. 内閣府マスターノードを監視することで、他のスレーブノードへの自動フェイルオーバーを実現できます...

Linux で mysql-8.0.20 をインストールするための詳細なチュートリアル

** Linuxにmysql-8.0.20をインストールする**環境の紹介オペレーティングシステム:...

シンプルなタブバー切り替えケースを実現するJavaScript

この記事では、タブバーの切り替え効果を簡単に実現するためのJavaScriptの具体的なコードを参考...

CentOS 7 で PHP 5.4 を 5.6 にアップグレードする方法の簡単な分析

1.ターミナルに入ったらPHPのバージョンを確認するphp -v出力は次のようになります。 PHP ...

MySQL がテーブルを読み取れないエラー (MySQL 1018 エラー) の解決方法

1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...

HTML 形式の JSON 出力の例 (テスト インターフェース)

JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関...

Linux CentOS 7.4 で mysql5.7.20 のパスワードを変更する方法

MySQL がバージョン 5.7 にアップグレードされた後、セキュリティが大幅に向上しました。しかし...

ウェブデザイナーが持つべき7つのスキル

Web デザインは科学であると同時に芸術でもあります。 Web デザイン作業は、半分は適切なプログラ...