0

编辑：

感谢 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; }

这也可以正常工作，但是.... css 文件将每分钟左右更改一次，与地图相同，以反映 gif 的新位置。我想通过以与地图类似的方式每 30 秒强制更新一次 css 来动态更改动画 gif 的位置。我还没有找到一种方法来强制对 css 文件进行动态定时更新。

有任何想法吗？

TIA。

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

如果idorclass在每个 CSS 文件中是唯一的，您可以预先加载所有 CSS，然后每 30 秒更改一次标识符。CSS 文件很少太大。

动态加载 CSS 是可能的，但我真的不建议这样做；它违反了网络标准，并欢迎潜在的安全问题。一种方法是将内容注入style标签，正如这个答案所述：

动态加载页面内容及其CSS - 如何防止由于尚未加载CSS而跳转？

最后一点，您可能应该练习为setTimeout函数使用字符串。使用匿名函数，或者如果该函数是全局的（在您的情况下是全局的），则对该函数的引用。例如setTimeout(refreshMap1, 30000);可以替换。setTimeout('refreshMap1()',30000);

于 2012-05-24T13:32:21.543 回答