7

マーキータグに画像を挿入したい。

私は次のコードを書きました：

<marquee scrollamount="4" behavior="alternate" direction="right" width="300"><img width="180px" style="padding-left:30px;opacity:0.7" src="img/cloud3.png"></marquee>

firefox と IE では正常に動作しますが、chrome では動作しません。何が問題ですか。？できるだけ早く返信してください。前もって感謝します。

4

6 に答える 6

20

marqueeタグは自然に対する犯罪だからです。また、新しいバージョンの Chrome ではサポートされなくなりました。

于 2013-05-06T05:58:59.660 に答える
10

はmarquee、最新の html ではサポートされていません。Chrome は少し前にサポートを終了しました。CSS3 または Javascript を介してこれを実装する必要があります。

さらに、W3C は、これは非標準であり、使用すべきではないと述べています。

この効果は、 jQueryまたはCSS3を介して簡単に達成できます。

于 2013-05-06T05:34:03.030 に答える
4

このmarquee要素にはさまざまな実装がありますが、その理由の 1 つは、公開された仕様がないためです。HTML5 では、要素は正確に定義されており、HTML5 ドラフトでは、そこで定義されているようにサポートする必要があります。(ドラフトでは「時代遅れ」で「不適合」であると宣言されていますが、これらは単に著者に向けたものです。実装の要件は異なります。) ただし、サポートにはまだ制限と違いがあります。たとえば、MDN onを参照してください。marqueemarquee

behavior="alternate"この場合、問題の原因は画像ではなく属性のようです。削除すると、Chrome でも画像が移動します。

これは、サポート不足ではなく、明らかに実装上のバグです。Chrome で DOM を調べると、behaviorプロパティの値alternateが指定どおりであることが示されますが、機能しません。CSS で要素に境界線を追加するとmarquee、画像が交互に動き始めますが、左右に数ピクセルだけです。

本当に方向を変える場合は、 の代わりに他のテクニックを使用することをお勧めしますmarquee。たとえば、単純な動画を JavaScript を使用して実装し、タイマーを使用してループで位置を変更したり、方向を交互に変更したりすることも簡単に実装できます。別の方法として、CSS3 アニメーションを使用することもできますが、(ブラウザーのサポートが限られているため) 単純ではありますが、それほど堅牢ではありません。

于 2013-05-06T08:24:50.873 に答える
2

HTML:

<div id="cloud">image</div>

CSS:

    #cloud{
        width:180px;
        padding-left:30px;
        opacity:0.7;
        animation:slide 10s infinite;
        -moz-animation:slide 10s infinite;//Firefox
        -webkit-animation:slide 10s infinite;//chrome and safari
        -o-animation: slide 10s infinite;//Opera   
}

@keyframes slide{
    0%   {-transform: translate(0px, 0px); }
        100% {-transform: translate(500px,0px); }
}    

@-moz-keyframes spin{
    0%   {-moz-transform: translate(0px, 0px); }
    100% {-moz-transform: translate(500px, 0px); }
}

@-webkit-keyframes slide{
         0%   {-webkit-transform: translate(0px, 0px); }
        100% {    -webkit-transform: translate(500px,0px); }
    }

@-o-keyframes slide{
    0%   {-o-transform: translate(0px, 0px); }
    100% {-o-transform: translate(500px, 0px); }
}

ここにフィドルがあります：

http://jsfiddle.net/qCahH

テキストを画像に置き換えます。

于 2013-05-06T06:57:15.187 に答える