Question

编辑:

感谢Akshat和Jefferey的帮助和建议。

如何使网页在坐标改变时顺利地重新定位图像。应用程序每分钟或每分钟都在服务器上写一个文件的坐标。我这么说很顺畅, 因为我不想用户干预或强制更新页面( META HTTP- EQUIV=REFRESH Content=300), 这很容易, 但不是一个很好的用户体验。

我希望这说得通再次谢谢你

我有一个简单的网页,有一张图像——一张地图,每分钟左右都会有变化。地图每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; }

这个功能也很好, 但是... 。 cs 文件会每分钟更改一次, 与地图相同, 以反映 gif 的新位置。我要动态地改变动画 Gif 的位置, 强制每30 秒更新一次 cs 。我还没有找到方法来强制 Cs 文件的动态时间更新。

有什么想法吗?

蒂娅。

Answer 1

您不需要更改 css 文件。请将此放入刷新功能 :

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

我希望这能帮上忙

Answer 2

如果 id 或 class 或 class 在每个 CSS 文件里都是独一无二的, 您可以在前面加载全部 CSS, 每30秒更改一个标识符。 CSS 文件很少太大。

动态装入 CSS 是可能的, 但我真的会建议它; 它违反网络标准, 并且欢迎潜在的安全问题。这样做的一个方法就是将内容输入到 < code> type 标签中, 正如此答案所描述的 :

< a href=" "https://stackoverflow.com/ questions/5232160/loading-page-content-and-its-cs-how-to-prevente-jump-weept-wise-cs-i" > 滚动页面内容及其 CSS 动态 - 如何防止跳跃,因为 CSS 尚未加载?

最后一个注意, 您也许应该对 < code> setTimeout 函数使用字符串。使用匿名函数, 或者如果该函数是全球性的( 在您的情况下是全球性的), 则引用该函数。 setTimeout( refreshMap1, 30000); 可以替换 setTimeout (restMap1 () 30000; 例如。

友情链接