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イメージフォント問題解決操作