1

我正在用 html 创建一个演示文稿。它应该类似于 MS Office 中的 powerpoint。它将预览所有幻灯片，并且一次将在窗口中显示一张幻灯片。我确实有一张幻灯片列表，并且可以通过 Javascript 播放它们。我可以将它们缩小到预览中。

关于显示的一张幻灯片： 我想知道在一个包装器 div 中保存所有显示的幻灯片的副本并通过设置 display 属性使它们一张一张地可见是否会更好。或者，如果一次将一张幻灯片复制到此包装 div 中会更好。

为了清楚起见......我得到这样的东西

<body>
 <div class="slide">/*slide stuff*/</div>
 <div class="slide">/*slide stuff*/</div>
 <div class="slide">/*slide stuff*/</div>
 <div class="slide">/*slide stuff*/</div>
</body>

我把它转换成这个

<body>
 <div id=preview>
  <div class="slide" id="1">/*slide stuff*/</div>
  <div class="slide" id="2">/*slide stuff*/</div>
  <div class="slide" id="3">/*slide stuff*/</div>
  <div class="slide" id="4">/*slide stuff*/</div>
 </div>
 ...

现在我应该通过更改显示属性来显示它们。所以html继续这样：

...
 <div id="mainwindow">
  <div class="slide" id="p1" display="none">/*slide stuff*/</div>
  <div class="slide" id="p2" display="none">/*slide stuff*/</div>
  <div class="slide" id="p3" display="none">/*slide stuff*/</div>
  <div class="slide" id="p4" display="none">/*slide stuff*/</div>
 </div>
</body>

或者我应该让mainwindowdiv 为空并在每次幻灯片更改时将幻灯片复制到其中？

...
 <div id="mainwindow">
 </div>
</body>

请对这两种解决方案的速度发表任何评论（如果幻灯片包含其他标签），并且由于这是学校作业，我想知道哪种解决方案会被视为“更清洁”和/或更“专业”。

4

1 回答 1

5

当您转到下一张幻灯片时，使用element.style.display隐藏比复制元素要快得多。复制需要更改 DOM，这总是比简单地隐藏元素更昂贵。

我能看到的唯一情况不是这种情况是当您拥有数百张幻灯片时。页面的剪切大小可能会使浏览器变慢。

于 2013-03-31T12:12:01.600 回答