0

編集：

Akshat と Jeffrey の助けとアドバイスに感謝します。非常に簡単な言葉で質問を再掲します。

座標が変更されたときに Web ページの画像をスムーズに再配置するにはどうすればよいですか。アプリケーションは、座標をサーバー上のファイルに約 1 分ごとに書き込みます。ユーザーの介入や強制的なページの更新 (META HTTP-EQUIV=REFRESH CONTENT=300) を望まないので、スムーズに言います。これは簡単ですが、ユーザー エクスペリエンスは良くありません。

これが理にかなっていることを願っています。ありがとうございました。

画像付きの単純な Web ページ (地図) があり、1 分ごとに変化します。マップは、次のように 30 秒ごとに動的に更新されます。

<script language="JavaScript">
<!--
function refreshMap1() {
   if (!document.images) return;
   document.images['map1'].src = 'map1.jpg?' + Math.random();
   setTimeout('refreshMap1()',30000);
}
//--></script>

それで：

<body onload=" setTimeout('refreshMap1()',30000)">
<img src="map1.jpg" name="map1">

これはうまくいきます。

次のように、絶対位置を含むスタイルシートを読み込んで、アニメーション GIF を地図上に重ねます。

<link rel="stylesheet" type="text/css" href="position.css" />

それで：

<img src="animation.gif" class="pos1" id="a1">

css ファイル (position.css) には次のものが含まれています。

.pos1 { position: absolute; left: 300px; top: 400px; }

これも問題なく動作しますが.... css ファイルは、マップと同じように 1 分ごとに変更され、gif の新しい位置が反映されます。マップと同様の方法で 30 秒ごとに css を強制的に更新することで、アニメーション GIF の位置を動的に変更したいと考えています。css ファイルの動的な時間指定更新を強制する方法を見つけることができませんでした。

何か案は？

ティア。

4

2 に答える 2

1

css ファイルを変更する必要はありません。これをリフレッシュ機能に入れるだけです：

document.getElementById("a1").style.top = XXX+"px";
document.getElementById("a1").style.left = XXX+"px";

これが役立つことを願っています。

于 2012-05-24T13:25:54.800 に答える
0

idorが各 CSS ファイルで一意である場合は、classすべての CSS を事前にロードして、30 秒ごとに識別子を変更することができます。CSS ファイルが大きすぎることはめったにありません。

CSS を動的にロードすることは可能ですが、私はお勧めしません。これは Web 標準に反するものであり、潜在的なセキュリティ問題を歓迎します。styleこれを行う1つの方法は、この回答が述べているように、コンテンツをタグに挿入することです:

ページコンテンツとその CSS を動的にロードする - CSS がまだロードされていないためにジャンプを防ぐ方法は?

最後に、おそらくsetTimeout関数に文字列を使用する練習をする必要があります。匿名関数を使用するか、関数がグローバルである場合 (およびあなたの場合はグローバルである場合)、関数への参照を使用します。たとえば、setTimeout(refreshMap1, 30000);置き換えることができます。setTimeout('refreshMap1()',30000);

于 2012-05-24T13:32:21.543 に答える