web-dev-qa-db-ja.com

ネストされた複数の<Marquee>トラブル

実際、私はあるボックスを別のボックスと交互に移動しようとしています。私はそれを機能させましたが、両方のブロックが互いに割り込むことはありません。私は何をすべきか?ブロックを互いに交差させるにはどうすればよいですか? style:positionを使用してみましたが、機能しません。

これが私が使用しているコードです:

<Marquee direction="down" behavior="alternate" scrollAmount=10 style="border:2px solid blue;">
  <Marquee behavior="alternate" scrollAmount=50 >
    <img src="img1.JPG">
  </Marquee>
  <Marquee behavior="alternate" scrollAmount=10 >
    <img src="img1.JPG">
  </Marquee>
</Marquee>

私は何が間違っているのですか?

65
praveenjayapal

ああ、親愛なる主よ!

上手。それらは静的に上下に配置されているため、交差しません。 2番目のマーキーは最初のマーキーを超えることはできません。

絶対位置決めを使用してマーキーを互いに接着解除することで、この問題を解決*できます。次に、それぞれを異なる水平方向と垂直方向の動きで二重にネストします。

<div style="border:2px solid blue; position: relative;">
    <Marquee direction="down" behavior="alternate" scrollAmount="10">
        <Marquee behavior="alternate" scrollAmount="50"><img src="img1.jpeg" alt="oh no" /></Marquee>
    </Marquee>
    <Marquee direction="down" behavior="alternate" scrollAmount="20" style="position: absolute; top: 0;">
        <Marquee behavior="alternate" scrollAmount="10"><img src="img1.jpeg" alt="help meee" /></Marquee>
    </Marquee>
</div>

*: 'solve'の値 'x'の場合、x = 'は'の恐ろしい混乱を引き起こします。

これは説明のみを目的としています。これは使用しないでください。

69
bobince

Marqueeタグは使用しないでください。これは非標準であり、非推奨です。あらゆる種類のアニメーションには、 jQuery UI のようなJavaScriptライブラリを使用してください。

51

JavaScriptライブラリを使用するか、JavaScript settimeoutに加えて、絶対配置とdhtmlを使用しない場合。

5
Bjorn Tipling

私はかつて、私に何かを売ろうとしている会社からの電子メール(JavaScriptのない環境)を受け取りました。署名は、マーキータグを使用して、一度に1行ずつスライドさせ、その後、配置されたままにしました。それは見事に行われました-目を引くのにちょうど十分な動きであり、マーキーに通常期待されるように確かにしわがれたものではありません。

私が学んだ教訓は、a)マーキーはどんなに小さくてもその場所を持っているということ、そしてb)「すべての一般化は悪い」ということです。非標準/非推奨について-Outlookは、HTMLメールの唯一のルールは、それが機能する場合はそれが良いということであるとほぼ指示しています。あなたが知っていることを磨くことには意味がありません。

3
grunties